Custom Checkbox not working for Button

[JorgeSivil]

Description

Following the docs: https://chakra-ui.com/docs/hooks/use-checkbox-group

State gets changed for the "Flex" element but not when clicking on the Button element.

function CustomCheckbox(props) {
    const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
        useCheckbox(props);
console.log(111, state.isChecked)
    return (
        <chakra.label display='flex' flexDirection='row' {...htmlProps}>
            <input {...getInputProps()} hidden />
            <Flex
                alignItems='center'
                justifyContent='center'
                border='2px solid'
                borderColor='green.500'
                w={4}
                h={4}
                {...getCheckboxProps()}
            >
                {state.isChecked && <Box w={2} h={2} bg='green.500' />}
            </Flex>
            <Button
                variant={state.isChecked ? 'solid' : 'outline'}
                {...getCheckboxProps()}
            >
                Morning
            </Button>
        </chakra.label>
    );
}

Chakra UI React: version: '2.8.2'

Link to Reproduction

https://codesandbox.io/p/sandbox/bold-swanson-vcdw43

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Chakra UI Version

2.8.2

Browser

Firefox 125.0

Operating System

• macOS
• Windows
• Linux

Additional Information

No response