React) 내 마우스 위치에 요소 생성 + 따라오기

내 마우스 따라오게 하기

const [xy,setXY]=useState({x:0,y:0})
const handleMouseMove=(e)=>{
        setXY({x:e.clientX,y:e.clientY});
    }

<div onMouseMove={(e)=>handleMouseMove(e)}>
   <div
      style={{position:"absolute",left:xy.x,top:xy.y}}
   >마우스따라이동<div>
</div>

내 마우스 위치에 요소 생성

const RightMenu = styled.div`
  width: 150px;
  height: 200px;
  background-color: red;
  position: absolute;
  left: ${props => `${props.xy.x}px`};
  top: ${props => `${props.xy.y}px`};
`;

const [xy, setXY] = useState({ x: -1000, y: -1000 });

<Box onClick={(event)=>setXY({ x: event.clientX, y: event.clientY })}>
	<RightMenu xy={xy} />
</Box>