[Refactor] Clean up the themed controls when unmounted

[dzole0311]

Context

There is an error that's thrown sometimes when navigating to the different routes (on the first map element in the stories, or the exploration page) in the Next.js instance. It happens only in the dev environment.

 Unhandled Runtime Error
Error: Cannot update an unmounted root.

Source
app/scripts/components/common/map/controls/hooks/use-themed-control.tsx (48:23) @ render

  46 |   useEffect(() => {
  47 |     if (rootRef.current) {
> 48 |       rootRef.current.render(
     |                       ^
  49 |         <ThemeProvider theme={theme}>{renderFn() as any}</ThemeProvider>
  50 |       );
  51 |     }

Acceptance Criteria

• The error should not be thrown

Related Tickets

[If applicable, link any tickets that are related]

[hanbyul-here]

👋 I was wondering if this can be a byproduct of the other error (the component is not getting properly mounted because there is an error) and I suspect it might be the case after looking into the problem in this branch - #1229 Can you confirm if you still see this error with etc-fix branch?

[hanbyul-here]

Closed via #1229