javascript – React-based resizable sidebar

I am an experienced developer, but new to the react and the javascript world. I am trying to create a resizeable sidebar in react(Please see the full code and demo here) for a personal project. Although it seems to be working I am not sure if this is correct. Here is the main part of the code.

I would like some feedback on:

  1. If this code is idiomatically correct? Like the use of useEffect, useState, and useRef.
  2. I am not sure how the resizeSidebar function is correctly resizing despite the asynchronous nature of setSidebarWidth
import React from "react";
import { useState, useEffect, useRef } from "react";
import "./App.css";

function App() {
  const sidebarRef = useRef(null);
  const resizerRef = useRef(null);
  const prevX = useRef(null);
  const (sidebarWidth, setSidebarWidth) = useState(268); 
  const (isTracking, setIsTracking) = useState(false);

  const resizeSidebar = (mouseMoveEvent) => {
    if (prevX && prevX.current) {
      let delta = mouseMoveEvent.clientX - prevX.current;
      setSidebarWidth(sidebarRef.current.getBoundingClientRect().width + delta);
      prevX.current = mouseMoveEvent.clientX;
    }
  };

  const stopResize = (event) => {
    window.removeEventListener("mousemove", resizeSidebar);
    window.removeEventListener("mouseup", stopResize);
    setIsTracking(false);
  };

  const startResizing = (mouseDownEvent) => {
    prevX.current = mouseDownEvent.clientX;

    window.addEventListener("mousemove", resizeSidebar);
    window.addEventListener("mouseup", stopResize);
  };

  useEffect(() => {
    if (!isTracking) prevX.current = null;
  }, (isTracking));

  /*useEffect(() => {
      
  }, (sidebarWidth))*/

  useEffect(() => {
    const resizer = resizerRef.current;
    resizer.addEventListener("mousedown", startResizing);
    setIsTracking(true);
  }, ());

  return (
    <div className="app-container">
      <div
        ref={sidebarRef}
        className="app-sidebar"
        style={{ width: sidebarWidth }}
      >
        <div className="app-sidebar-content"></div>
        <div ref={resizerRef} className="app-sidebar-resizer"></div>
      </div>
      <div className="app-frame"></div>
    </div>
  );
}

export default App;

Here is a link to sandbox: https://codesandbox.io/s/react-resizable-sidebar-kz9de