OnClick not working properly on div with 200% of its parent height

I’m building a schedule component (image below) on React using a table, for the cells I provide the starting table cell and a length (number).

On the cell I use style={{ height: ${100 * length}% }}, but this doesn’t work well with the OnClick prop, because it only registers mouse clicks up to 100% of the parent container (example on the gif below).

Is there a way to make the OnClick prop work for the entire height of the div?

Code Sandbox:

https://codesandbox.io/s/friendly-agnesi-nm2mek?file=/pages/index.tsx