Prevent Double-Click Dups in React

DoubleClickDups1.js

function App() {
    const onClick = () => console.log("onClick");
    return <button onClick={onClick}>Click Me</button>;
}

DoubleClickDups2.js

function App() {
    const onClick = () => console.log("onClick");
    const onClick2 = debounce(onClick, 300) 
    return <button onClick={onClick2}>Click Me</button>;
}

DoubleClickDups3.js

function App() {
    const [count, setCount] = useState(0);               
    const onClick = () => setCount(prev => prev + 1);
    const onClick2 = debounce(onClick, 300);         
    return <div>
        Count: {count}
        <br/>
        <button onClick={onClick2}>Click Me</button>
    </div>
}

DoubleClickDups4.js

function App() {
    const [count, setCount] = useState(0);
    const onClick = () => setCount(prev => prev + 1);
    const onClick2 = debounce(onClick, 300);
    const onClick3 = useCallback(onClick2, []);
    return <div>Count: {count}
        <br/>
        <button onClick={onClick3}>Click Me</button>
    </div>
}

What's the difference