custom hook to manage theme

useTheme.ts

import { useCallback, useEffect, useState, } from 'react'

type Theme = 'dark' | 'light'

export default function useTheme(){
  const [theme, setTheme] = useState<Theme>('light')
  
  const changeTheme = useCallback((payload: Theme) => {
    return () => {
      setTheme(payload)
    }
  }, [])
  
  useEffect(() => {
    document.documentElement.className = theme
  }, [theme])
  
  return [theme, changeTheme]
}