Reactjs Scroll Horizontal Move

const onMouseMove = e => {

        const { isDown } = state

        if (!isDown) { return }
console.log('move')
        if (myRef && myRef.current && !myRef.current.contains(e.target)) {
            return
        }
        // console.log('mousemove')

        e.preventDefault()

        const {clientX, scrollX, isScrolling} = state
        const el = myRef.current

        if (isScrolling) {
            el.scrollLeft = scrollX + e.clientX - clientX
            // myRef.curent.scrollLeft = scrollX + e.clientX - clientX
            let sX = scrollX + e.clientX - clientX
            let cX = e.clientX

            setState({
                ...state,
                scrollX: sX,
                clientX: cX
            })
        }

    }

    const onMouseUp = e => {
        console.log('mouseup', e)
        if (myRef && myRef.current && !myRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        setState({
            ...state,
            isScrolling: false,
        })
    }

    const onMouseDown = e => {
        console.log('mousedown', e)
        if (myRef && myRef.current && !myRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        setState({
            ...state,
            isScrolling: true,
            clientX: e.clientX
        })
    }

    useEffect(() => {
        document.addEventListener('mousedown', onMouseDown)
        document.addEventListener('mouseup', onMouseUp)
        document.addEventListener('mousemove', onMouseMove)

        return () => {
            document.removeEventListener('mousedown', onMouseDown)
            document.removeEventListener('mouseup', onMouseUp)
            document.removeEventListener('mousemove', onMouseMove)
        }
    })