You may keep track of randomly selected cell (e.g. as an array of [x,y] indexes) then update your state (upon timer ticking or button click) so you get your matrix re-rendered:
const { useState } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const App = () => {
const randomXY = () => [0|Math.random()*5, 0|Math.random()*5],
[cell, setCell] = useState(randomXY()),
nextCell = () => setCell(randomXY())
return (
<div>
<div className="wrapper">
{
[...Array(5)]
.map((_,i) => (
<div className="row">
{
[...Array(5)]
.map((_,j) => (
<div
className={`cell${i == cell[0] && j == cell[1] ? ' blue' : ''}`}
/>
))
}
</div>
))
}
</div>
<button onClick={nextCell}>Reset</button>
</div>
)
}
render (
<App />,
rootNode
).wrapper {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 20px;
height: 20px;
border: 1px solid black;
}
.blue {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>