React draggable not clicking at once - reactjs

Question

I'm making a puzzle game with React. I am trying to use the "draggable" function, but there is a phenomenon that it does not click at once and requires several times to work.
It doesn't seem to be a mouse problem.
Below is the code. I don't know which one is the problem.
board.tsx
const Board = () => {
const {blocks, handleSwap} = useBlocks();
const [hydrated, setHydrated] = useState(false);
const [grabItem, setGrabItem] = useState("");
useEffect(() => {
setHydrated(true);
}, []);
return (
<>
{hydrated && (
<StyledBoard>
{blocks.map((row) =>
row.map((block) => (
<Block
key={uuid()}
id={block.index}
color={block.color}
handleSwap={handleSwap}
grabItem={grabItem}
setGrabItem={setGrabItem}
/>
))
)}
</StyledBoard>
)}
</>
);
};
export default Board;
subcomponent
block.tsx
import styled from "styled-components";
const Block = ({id, color, handleSwap, grabItem, setGrabItem}: IBlockProps) => {
const [isDragging, setIsDragging] = useState(false);
const [isDragOver, setIsDragOver] = useState(false);
const handleDragStart = (e: React.DragEvent<HTMLElement>) => {
setIsDragging(true);
setGrabItem(e.currentTarget.id);
};
const handleDragOver = (e: React.DragEvent<HTMLElement>) => {
e.preventDefault();
setIsDragOver(true);
};
const handleDragLeave = (e: React.DragEvent<HTMLElement>) => {
e.preventDefault();
setIsDragOver(false);
};
const handleDrop = (e: React.DragEvent<HTMLElement>) => {
e.preventDefault();
setIsDragging(false);
setIsDragOver(false);
handleSwap(grabItem, e.currentTarget.id);
};
return (
<StyledBlock
onDragStart={handleDragStart}
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
id={id}
isDragOver={isDragOver}
color={color}
/>
);
};
export default Block;