Creating click events for looped rectangles in canvas

Question

I have a basic canvas square with a grid of rectangles inside, how can I create click events that change the fill color of a specific rectangle within the grid when clicked. Is there a method to fit inside of the loop coordinate detection or is there a better library that will create clickable rectangles?

Here is a demo of my work: https://codesandbox.io/s/brave-worker-ywe3z5

const App = () => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    context.imageSmoothingEnabled = false;
    context.fillStyle = "#000000";
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);

    for (var y = 1; y <= 1000; y += 11) {
      for (var x = 1; x <= 1000; x += 11) {
        context.fillStyle = "rgba(255,255,255,0.1)";
        context.lineWidth = 1;
        context.fillRect(x, y, 10, 10);
      }
    }
  }, []);

  return <canvas ref={canvasRef} width={1002} height={1002}></canvas>;
};

ReactDOM.render(<App/>, document.getElementById('root'));

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here is a sample of something I'm trying to achieve: https://www.sandbox.game/en/map/