astro onclick event not calling the function

Question

I am trying to build a personal project in astro. For this, I created a header component that looks like this:

import { AlignJustify } from 'lucide-react';
import Sidebar from './Sidebar';
import { useState } from "react";


const Header = () => {
    const [open, setOpen] = useState(false);
    const buttonStyle = {
        backgroundColor: '#BFBFB1', // Background color
        width: '3.5rem', // Adjust width as needed
        height: '3.5rem', // Adjust height as needed
        borderRadius: '50%', // Make it circular
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    };

    const toggleVisibility = () => {
        setOpen(!open);
        console.log(open);
    };

    return (
        <>
            <div>
                <button onClick={toggleVisibility} style={buttonStyle}>
                    <AlignJustify/> 
                </button>
            </div>
            <div>
                {open && <Sidebar open={open}/>}
            </div>
        </>
    );
};

export default Header;

This header.jsx is being called inside the Layout.astro. The issue is whenever I click on my button, toggleVisibility is not being called, but when I initially set the value of open to True, I am able to see "hello" on my localhost and it's hidden when the value of open is initially set to false. For some reason my onclick is not working.

What might be the possible reason for this? There are no errors rendering in the console.

thank you