I'm trying to implement the same effect google sheets and ms excel has, that you press on one cell and move the mouse to highlight other close cells, the problem is when the onMouseDown event is fired and I'm still holding the mouse down and move the mouse over other cells - the onMouseOver cannot be fired, the mouse cursor itself turns into the not-allowed sign, any suggestions how to solve it?

Test.js

import React, { useRef } from 'react'

function Test() {
    const myTable = useRef(null)
    return (
            <>
            <table ref={myTable}>
                <tbody>
                    {
                        [...Array(4)].map((row, rowIndex) => (
                            <tr>
                                {
                                    [...Array(4)].map((col, colIndex) => (
                                        <td style={{
                                            border: '1px black solid',
                                            width: '100px',
                                            height: '100px'
                                          }}
                                            onMouseDown={(e) => console.log('mouse down')} 
                                            onMouseOver={(e) => console.log('mouse over')}>
                                        </td>
                                    ))
                                }
                            </tr>
                        )

                        )
                    }
                </tbody>
            </table>
        </>
    )
}

export default Test