In React flow, I want to add custom many cursors however, the cursor is not relative to the canvas; it relative to the outer div; how to handle this?

Question

In React flow, I merely want to add custom many cursors; however, the cursor is not relative to the canvas; it is only relative to the outer div; how to handle this? , im able to get mouse position by onMouseMove , and i have created custom cursor design used css,

How to solve it , how make that cusror div relative to reactflow

code example

       <ReactFlow
        className="position-relative"
        ref={reactFlowWrapper}
        nodes={nodes}
        edges={edges}
     
        onNodesChange={(data: any) => {
          console.log(data, "tesDrag");
      
          onNodesChange(data);

        }}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onConnectStart={onConnectStart}
        onConnectEnd={onConnectEnd}
        nodesConnectable={editMode}
        nodesDraggable={editMode}
   
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        onInit={setRfInstance}
   
        onNodeDragStart={() => console.log("onNodeDragStart")}
        onNodeDragStop={() => console.log("onNodeDragStop")}
        proOptions={proOptions}
        nodeOrigin={[0.5, 0]}
        // fitView
        fitViewOptions={{ padding: 900 }}
        attributionPosition="bottom-right"
     
        onMouseMove={(event) => {
          const position: ReactFlowInstance =
            rfInstance.screenToFlowPosition({
               x: event?.clientX,
              y: event?.clientY,
             });
         // setLocalCursor(position);
          console.log(position, "positionMouse");

           const awareness = wWsProvider.awareness;
           awareness.setLocalStateField("cursor", position);

        //   // console.log(position, "position");
        // }}


 

      >
        <MiniMap style={minimapStyle} zoomable pannable />
        <Controls style={{ marginBottom: "20px" }} />
        <Background gap={8} color="#ccc" variant={BackgroundVariant.Dots} />

        {Array.from(cursors?.entries()).map(([clientId, position]: any) => (
          <>
            {position?.name !== userProfile?.user?.email &&
              !position?.dragging && (
                <LightTooltip
                  title={position?.name}
                  open={true}
                  // backgroundColor={"white"}
                  // color={"black"}

                  // arrow
                >
                  <NavigationIcon
                    sx={{
                      position: "absolute",
                      left: position?.x,
                      top: position?.y,
                      fill: position?.color,
                      transform: `rotate(-15deg)`,
                    }}
                  />
                </LightTooltip>
              )}
          </>
        ))}
      </ReactFlow>