bug: Toggle does not work with React

[ricardomatias]

Reproduction URL (Required)

localhost

What version of daisyUI are you using?

5.0.43

Which browsers are you seeing the problem on?

No response

Describe your issue

No matter the value passed in to the checkbox, the first icon is always shown on page load.

import React from 'react';
import { useColorScheme } from '../hooks/useColorScheme';
import { Moon, Sun } from 'lucide-react';

export const DarkModeToggle = () => {
    const { colorScheme, toggleColorScheme } = useColorScheme();

    return (
        <label className="toggle text-base-content">
            <input type="checkbox" value={colorScheme} onChange={toggleColorScheme} className="theme-controller" />
            <Sun className="w-4 h-4" />
            <Moon className="w-4 h-4" />
        </label>
    );
};

This is either a bug or missing documentation.

[github-actions]

Thank you @ricardomatias for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Please share a reproduction URL