Toogle doesn't change when the checked prop's state is changes by another components or button

[cs50victor]

here is the code I'm working with

import { useEffect, useState } from "react"
import { useTheme } from "next-themes"
import {DarkModeSwitch} from "react-toggle-dark-mode"
import tw from "twin.macro"

const ThemeChanger = ({button}) => {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()
const { themes } = useTheme()
const [isDarkMode, setDarkMode] = useState(true)

// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), [])

const capitalize = (s) => {
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
}

const switchTheme = () => {
if (mounted) {
setTheme(theme === "light" ? "dark" : "light")
theme === "light" ? setDarkMode(true) : setDarkMode(false)
}
};

return (
button === true
? (

)
: (<>
Theme:
{themes.map((t) => ( {capitalize(t)} ))}
<button
tw="rounded-xl bg-indigo-800 px-7 py-3 mx-3"
onClick={() => setDarkMode(!isDarkMode)}
>
Changing DarkModeSwitch's checked prop state doesn't change how it looks

</>
)

)
}

export default ThemeChanger