Next.jsのinputで発生するエラーの解決方法について

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

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

export const SwitchTheme = () => {
  const getInitialColorMode = () => {
    const devicePreferenceMode = window.localStorage.getItem('color-theme')
    const hasDevicePreference = typeof devicePreferenceMode === 'string'

    if (hasDevicePreference) {
      return devicePreferenceMode
    }

    const preference = window.matchMedia('prefers-color-scheme: dark')
    const hasMediaQueryPreference = typeof preference.matches === 'boolean'

    if (hasMediaQueryPreference) {
      return preference.matches ? 'dark' : 'light'
    }

    const themeSwitchChecked = document.getElementById('themeSwitch').checked

    return themeSwitchChecked ? 'dark' : 'light'
  }

  const [darkTheme, setDarkTheme] = useState(undefined)
  const hamdleToggleTheme = (e) => {
    setDarkTheme(e.target.checked)
  }

  useEffect(() => {
    const currentColorMode = getInitialColorMode()
    document.documentElement.style.setProperty('--initial-color-mode', currentColorMode)

    document.documentElement.setAttribute('data-theme', currentColorMode)
    setDarkTheme(currentColorMode === 'dark' ? true : false)
  }, [])

  useEffect(() => {
    if (darkTheme != undefined) {
      if (darkTheme) {
        document.documentElement.setAttribute('data-theme', 'dark')
        window.localStorage.setItem('color-theme', 'dark')
      } else {
        document.documentElement.setAttribute('data-theme', 'light')
        window.localStorage.setItem('color-theme', 'light')
      }
    }
  })

  return (
    <label className={styles.label} onChange={hamdleToggleTheme}>
      <input type='checkbox' name='' id='themeSwitch' checked={darkTheme} />
    </label>
  )
}