How to change the group state of a parent but not its children from a root component?

Question

Currently, I want to separate the grouping so that the Element isn't affected by the group by the button. Transitions to open the dropdown work but in doing so activate the group-hover properties of the SideBarIcon element, which is not what I would want to happen.

           <button className = "menu-Icon top-0 right-0 group hover:bg-slate-600">
                <p className='group-hover:scale-0 scale-100 transition-all duration-300 '>Projects</p>
                <div className = "flex fixed top-0 right-0 h-screen w-24 m-0 flex-col bg-gray-700 shadow-lg bg-opacity-70 group-hover:scale-100 scale-0 transition-all duration-300">
                    <SideBarIcon props={<BsList size = "32"/>} data="/projects"/>
                    <SideBarIcon props={<BsPlus size = "32"/>} />
                    <SideBarIcon props={<BsPlus size = "32"/>} />
                    <SideBarIcon props={<BsPlus size = "32"/>} />
                    <SideBarIcon props="blah" text = "some text"/>
                </div>
            </button>