React useState does not update the state instantly [duplicate]

I am trying to make a draggable and resizable component on React using 2 libraries. When it is resizing, I wish to disabled draggable so I added a state isResizing. Hhere is my code.

import React, { useState, useEffect } from "react";
import Draggable from "react-draggable";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";
const CustomStyle = {
  display: "flex",
  width: "140px",
  height: "140px",
  backgroundColor: "#e8e8a2",
};

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

export function MyDraggable({ id, content, styles }) {
  const [isResizing, setIsResizing] = useState(false);

  return (
    <Draggable disabled={isResizing}>
      <ResizableBox
        width={200}
        height={200}
        minConstraints={[100, 100]}
        maxConstraints={[500, 500]}
        resizeHandles={["se"]}
        onResizeStart={(e) => {
          e.preventDefault();
          setIsResizing(true);
          console.log("isResizing", isResizing);
        }}
        onResizeStop={(e) => {
          e.preventDefault();
          setIsResizing(false);
          console.log("isResizing", isResizing);
        }}
      >
        <div
          style={{
            border: "1px solid black",
            height: "100%",
            width: "100%",
            padding: "10px",
            boxSizing: "border-box",
          }}
        >
          Drag and Resize Me!
        </div>
      </ResizableBox>
    </Draggable>
  );
}

However, it doesn’t work well. When I’m resizing the component, it is still draggable. I print the state of isResizing and find out that the state doesn’t update instantly.
The output is like

isResizing false
isResizing true

It doesn’t make any sense to me. Any help is appreciated how I can fix this.

I created a sandbox to test the functionality. https://codesandbox.io/p/sandbox/dnd-kit-resize-forked-fs6s7q. Thanks in advance.