REACT my custom crosshair does not activate onclick functions - reactjs

Question

I created a custom crosshair using react and I can't seem to get it click on certain elements such as a button it won't let me click the button but If I removed the custom crosshair the button onclick will let me click and it will run the function associated with the button I tried creating a zIndex css to have the cursor overlapped the other crosshair but that did not work any suggestion to make it where I can click other elements and the function can run? written via codepen
const { useRef } = React
const Main = props => {
const cursor = {
cursor: "crosshair",
width: "20PX",
height: "20PX",
position: "fixed",
};
const borders = {
width: "800px",
height: "500px",
backgroud: "#ccc",
border: "4px solid #333"
}
const textInput = useRef()
React.useEffect(() => {
document.addEventListener("mousemove", (event) =>{
textInput.current.style.top = event.clientY + 'px'
textInput.current.style.bottom = event.clientX + 'px'
textInput.current.style.left = event.clientX + 'px'
textInput.current.style.right = event.clientY + 'px'
})
console.log("dsadas")
});
return (<div style={borders} >
<div ref={textInput} style={cursor}>
</div> <button >dsa2222ads</button></div>)
}
ReactDOM.render(<Main />, document.getElementById("root"));

Answer 1

The code in the question, while ingenious, cannot be fixed as-is, because of 2 main reasons:
The cursor element is receiving all click events instead of what's beneath it;
As pointed out in comments, my initial suggestion (to use pointer-events: none; styling on the cursor element) does make the button work properly, but the cursor: crosshair; style stops working because the element gets ignored when it comes to ALL pointer aspects, not only events.
The following alternative relies purely on CSS, more specifically on the * selector to assign the cursor: crosshair; style to all elements at any depth inside the containing element (and also place it on the borders element). The markup gets lighter since we don't need the cursor element any more and no more code to move it around the page. Also no more document-level event listeners.
.borders {
cursor: crosshair;
width: 800px;
height: 500px;
background: #ccc;
border: 4px solid #333;
}
.borders * {
cursor: crosshair;
}
<div class="borders">
<button onClick="alert('Ok!')">Button</button>
</div>
Now, should you need a different cursor on just some internal elements, you can easily achieve that using selector specificity to target that element and put cursor: auto; or whatever you need on it. If you want to restore the crosshair on that element's children, just re-apply the * selector, and so on. So you have complete and granular control over the cursor all with CSS. If a code sample for this scenario is needed, let me know in the comments. Thank you!