I'm trying to implement a feature for expanding and collapsing the sidebar by following a guide on gg. I wonder why when I use isResetting to add classes to aside tag. It works very smoothly but when I remove isResetting and add these classes (transition-all ease-in-out duration-300) to default classes. It works a little bit delayed

  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.preventDefault();
    e.stopPropagation();

    isResizingRef.current = true;
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!isResizingRef.current) return;
    let newWidth = e.clientX;
    if (newWidth < 240) {
      newWidth = 240;
    }
    if (newWidth > 480) {
      newWidth = 480;
    }
    if (navbarRef.current && sidebarRef.current) {
      sidebarRef.current.style.width = `${newWidth}px`;
      navbarRef.current.style.setProperty("left", `${newWidth}px`);
      navbarRef.current.style.setProperty(
        "width",
        `calc(100% - ${newWidth}px)`
      );
    }
  };
  const handleMouseUp = (e: MouseEvent) => {
    isResizingRef.current = false;
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  };
<aside
    ref={sidebarRef}
    className={cn("group/sidebar h-full bg-secondary overflow-y-auto relative flex w-60 flex-col                   z-[99999]",
    isResetting && "transition-all ease-in-out duration-300",
    isMobile && "w-0"
    )}
>
....
</aside>