Very slow setState - React - reactjs

Question

I'm rookie when it comes to react.
Bumped into problem when during handleDragEnd event in trello alike draggable board when wanted to put some logic:
const openCloseDialog = () => {
setOpenDialog(!openDialog);
}
const handleDragEnd = (cardId: number, sourceLaneId: number, targetLaneId: number, position: number, cardDetails: ICard): Boolean => {
if (sourceLaneId != targetLaneId) {
setDialogTitleContent(cardDetails.description)
setCardId(cardId)
setTargetLaneId(targetLaneId)
openCloseDialog();
return true;
}
return false;
}
This bunch of simple setState causes huge performance issue.
Definition of states:
const [openDialog, setOpenDialog] = useState<boolean>(false);
const [dialogTitleContent, setDialogTitleContent] = useState<string>("");
const [cardId, setCardId] = useState<number>(0);
const [targetLaneId, setTargetLaneId] = useState<number>(0);
When it comes to opening dialog then it's getting even worse.
Definition of Dialog component:
interface IProps {
title: string,
cardId: number,
targetLaneId: number,
openDialog: boolean,
openCloseDialog: () => void,
fetchCategories: () => void
}
export const DraggableDialog: FC<IProps> = ({
title,
cardId,
targetLaneId,
openDialog,
openCloseDialog,
fetchCategories
}) => {
return (
<>
<Dialog
open={openDialog}
onClose={() => openCloseDialog()}
aria-labelledby="draggable-dialog-title">
{`Do You want to move all payment records with following title?: "${title}"`}
<Button onClick={moveOneCard} color="primary">
Just that one
</Button>
<Button onClick={moveManyCards} color="primary">
All of them
</Button>
</Dialog>
</>
);
}
Am I doing some obvious mistake which I'm not aware of?