title: ReactJs custom hook on switch theme
body: <p>Hello I would like to ask for help with my custom hooks
  I can't structure it in a way that I just put my themes in a single file</p>
  
  <p>I need to import my themes in my hook and my component
  I've tried everything and I can't solve it, basically I need to save the themes preferences in localstorage and the default theme is light</p>
  
  <p>code:</p>
  
  <pre><code>import { darkTheme, lightTheme } from './themes/index';
  
  export default function App() {
    const [theme, setTheme] = usePersistedState('theme');
    const toggleTheme = () =&gt; {
      setTheme(theme.type === 'light' ? darkTheme : lightTheme);
    };
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;GlobalStyle /&gt;
        &lt;div className="App"&gt;
          &lt;button onClick={toggleTheme}&gt;a&lt;/button&gt;
        &lt;/div&gt;
      &lt;/ThemeProvider&gt;
    );
  </code></pre>
  
  <p>my hook:</p>
  
  <pre><code>function usePersistedState(key) {
    const [state, setState] = useState(() =&gt; {
      const storageValue = JSON.parse(localStorage.getItem(key));
      console.log(storageValue);
      switch (storageValue) {
        case 'dark':
          return darkTheme;
        case 'light':
          return lightTheme;
        default:
          return lightTheme;
      }
    });
    useEffect(() =&gt; {
      localStorage.setItem(key, JSON.stringify(state.type));
    }, [key, state]);
  
    return [state, setState];
  }
  </code></pre>