How to select Radix UI Menubar menu only when being clicked and not on hover?

[PawanKr3012]

I am working with Radix UI menubar. By default the nature of the menubar is that when we click on any menu then we are able to see content of that menu appear but then when we hover on any other menu even without clicking on the menu the menu being hovered gets selected.

I only want the menu to be selected when it is clicked. In order to do so I created a value state variable and tried to the assign the value to menubar root value prop. Now I want to change the state accordingly on the click of the menu, but it is not working.

Here is the code:

const MenubarDemo = () => {
    const [value, setValue] = useState();

    const onTriggerClickHandler = (value) => {
        console.log(value);
        setValue(value);
    };

    return (
        <Menubar.Root value={value}>
            <Menubar.Menu value="square">
                <Menubar.Trigger onClick={() => onTriggerClickHandler("square")}>
                    Square
                </Menubar.Trigger>
                <Menubar.Portal>
                        ..... 
                        .....
                </Menubar.Portal>
            </Menubar.Menu>

            <Menubar.Menu value="circle">
                <Menubar.Trigger onClick={() => onTriggerClickHandler("circle")}>
                    Circle
                </Menubar.Trigger>
            </Menubar.Menu>

            <Menubar.Menu value="rohmbus">
                <Menubar.Trigger onClick={() => onTriggerClickHandler("rhombus")}>
                    Rhombus
                </Menubar.Trigger>
            </Menubar.Menu>
        </Menubar.Root>
    );
};

export default MenubarDemo;

Please guide me