How to differentiate mouse “click” and “drag” event with React

import React, { useState } from 'react';

const Component = () => {
    const [isDrag, setIsDrag] = useState(false);

    return (
        <button
            onMouseDown={() => {
                setIsDrag(false)
            }}
            onMouseMove={() => {
                setIsDrag(true)
            }}
            onMouseUp={() => {
                if (isDrag) {
                    // event when is drag
                } else {
                    // event when is click
                }
            }}
         >...</button>
    )
}