Checkbox - Type 'CheckedState' is not assignable to type 'boolean | ChangeEvent<Element>'

[riculum]

I am encountering an error in my code that uses the shadcdn library. The error specifically occurs with the Checkbox onCheckedChange event in the following part of my code:

<FormField
    control={form.control}
    name="remember"
    render={({field}) => (
        <FormItem className="flex flex-row items-start space-x-3 space-y-0.5">
            <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange}/>
            </FormControl>
            <div className="space-y-1 leading-none">
                <FormLabel className="text-md cursor-pointer select-none">Angemeldet bleiben</FormLabel>
            </div>
        </FormItem>
    )}
/>

The error message I'm getting is:

TS2322: Type '(event: boolean | ChangeEvent<Element>) => void' is not assignable to type '(checked: CheckedState) => void'. Types of parameters 'event' and 'checked' are incompatible. Type 'CheckedState' is not assignable to type 'boolean | ChangeEvent<Element>'. Type '"indeterminate"' is not assignable to type 'boolean | ChangeEvent<Element>'.

Additionally, I am also using react-hook-form and zod for validation, as shown in the following code snippet:

const form = useForm({
    resolver: zodResolver(authSchema),
    defaultValues: {
        email: "[email protected]",
        password: "123456",
        remember: false
    }
});

Could you please help me understand the cause of this error and suggest a possible solution?

[riculum]

Does anyone facing the same error and maybe have a suggestion on how to fix it?

[pepew-le-boss]

I found this:
https://stackoverflow.com/questions/76641802/shadcn-type-checkedstate-is-not-assignable-to-type-boolean-changeeventel

But I didn't wanted to roll back so I've done this instead:

<Checkbox checked={field.value} onCheckedChange={field.onChange as (checked: CheckedState) => void} />

[quocanlikebanana]

Have you tried "checked === true"? Like mine:
<Checkbox className="col-span-2 row-span-2 flex items-center gap-2" checked={state.hasEmailNotification} onCheckedChange={(checked) => { dispatch({ type: "SET_EMAIL_NOTIFICATION", payload: checked === true, }); }} > Send email notification </Checkbox>