I am trying "merge"/"group" select multiple meshes.

At the moment I have something like this.

//wrapper

        <group
            onPointerOver={(e) => getOverEvent(e)}
            onPointerOut={(e) => getOutEvent(e)}
            onPointerMissed={(e) => clickOutside(e)}
            onClick={(e) => clickEvent(e)}
            dispose={null}
            ref={group}
            >
            {children}
        </group>

and children as follows

            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe.geometry}
                material={materials.laces}
                name="1"

            />
            
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe_1.geometry}
                material={materials.mesh}
                name="2"
            >
            </mesh>
            
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe_2.geometry}
                material={materials.caps}
                name="3"
            />

This result of course is desired, as it hovers the hovered mesh.

however i would also like to be able to group hover certain meshes I have seen something somewhat related to what i want to do. https://github.com/pmndrs/drei#select

Basically i want to group mesh 1 and 3 for example, so if either for those meshes are selected/hovered they are detected that they are of the same group and hover/highlight both of them.