How to determine which rectangle is under the cursor?

Question

How can I make the handleClick function with the same argument fire when the dragover event occurs? I want to be able to understand what rectangle is currently under the cursor when transferring.

In the Section component, the definition is made on click and passes the required argument. I need to replicate the handleClick functionality on the component above. I tried using useRef, but after the second application inside Section it disappears. I made a useRef on the component above in order to repeat the functionality of handleClick from Section.

function RootFrame(props) {

  const padding = 150;

  const { root } = props.store;
  const scale = 0.7;

  const height = padding * 2 + root.height * scale;


  const stageRef = useRef(null)

  //const [groupRef, setgroupRef] = useState(null)
  const groupRef= useRef(null)



  const dragover=(e)=>{
    
    e.preventDefault();

    console.log(groupRef)

    // const firstSection = e.findAncestor(".section");
    // if (firstSection === groupRef.current) {
    //   props.store.selectedSectionId = props.section.id;
    // }

  
  }



  useEffect(() => {
    const con = stageRef.current.container()

    con.addEventListener('dragover', dragover )


    con.addEventListener('drop', function (e) {

      e.preventDefault();
      console.log('drop')
      // console.log(e)

      // now we need to find pointer position
      // we can't use stage.getPointerPosition() here, because that event
      // is not registered by Konva.Stage
      // we can register it manually:
      stageRef.current.setPointersPositions(e);

      //props.store.splitCurrentSection("vertical",stageRef.current.getPointerPosition().x);

    });
  }, [groupRef])


  const handleClick = (e) => {
    if (e.target.nodeType === "Stage") {
      props.store.selectedSectionId = null;
    }

  };

  return (
    <div id='1'>
      <div>
        <div style={{
          width: 'fit-content', border: '1px solid black'
        }} draggable={true}>
          <img src="./images/horizont.png" />
        </div>


      </div>
      <Stage
        width={800}
        height={height}
        ref={stageRef}
        onClick={(e) => handleClick(e)}
        id="container"
      >
        <Provider store={window.store}>
          <Layer scaleX={scale} scaleY={scale} y={20} x={20}>
            <Section
              section={root.sections[0]}
              x={root.frameSize}
              groupRef={groupRef}
              y={root.frameSize}
        
            />
            {/* <Sash
              width={root.width}
              height={root.height}
              size={root.frameSize}
            /> */}
            <Metrics />
          </Layer>
        </Provider>
      </Stage>
    </div>
  );
}




function SectionInner(props) {

  // const groupRef = useRef(null)


  const { section, x, y, groupRef } = props;


  const isSelected = props.store.selectedSection === section;

  const childSections = [];

  let offsetX = 0;
  let offsetY = 0;

  for (const child of section.sections) {
    if (child.nodeType === "section") {
      childSections.push(<Section section={child} x={offsetX} y={offsetY} />);
    } else {
      childSections.push(
        <Devider
          width={child.width}
          height={child.height}
          x={offsetX}
          y={offsetY}
        />
      );
    }

    if (section.splitDirection === "vertical") {
      offsetX += child.width;
    } else {
      offsetY += child.height;
    }
  }




  const handleClick = (e) => {
    const firstSection = e.target.findAncestor(".section");

    if (firstSection === groupRef.current) {
      props.store.selectedSectionId = props.section.id;
    }
  };

  return (
    <Group
      x={x}
      y={y}
      onClick={(e) => handleClick(e)}
      ref={groupRef}
      name="section"
    >
      <Glass
        width={section.width}
        height={section.height}
        padding={section.frameSize}
      />
      {/* <OpeningDirection
        width={section.width}
        height={section.height}
        padding={section.frameSize}
        type={section.type}
      /> */}

      <Sash
        width={section.width}
        height={section.height}
        size={section.frameSize}
      />
      {/* <Handle
        width={section.width}
        height={section.height}
        padding={section.frameSize}
        type={section.type}
      /> */}
      {isSelected && (
        <Rect
          width={section.width}
          height={section.height}
          fill="green"
          opacity={0.3}
        />
      )}
      {childSections}
    </Group>
  );
}