Build UI of Hoshin Kanri X matrix for Policy deployment using React JS

I'm struggling to create X matrix in which we can create an Item which automatically generate cells in row or column as well as that cell can be interactive, like i want to do some action on click of that cell for example on single click cell will fill with ⭕, with double click it will fill with filled 🔴 and with three clicks it will fill with 🔺 .