How to convert vanilla to react hook toggle menu

I am trying to get a code from vanilla js with bootstrap and use react hooks on yet. I watched some videos on youtube about useState and useReff, however, these concepts still are a bit confusing when I try to apply them in my projects.

I am trying to convert a toggle function in vanilla to react hooks. Can you please guide me on how to start thinking to change this code?

Thanks in advance.

Vanilla:

window.addEventListener("DOMContentLoaded", (event) => {
  // Toggle the side navigation
  const sidebarToggle = document.body.querySelector("#sidebarToggle");

  if (sidebarToggle) {
    if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
        document.body.classList.toggle('sb-sidenav-toggled');
    }
    sidebarToggle.addEventListener("click", (event) => {
      event.preventDefault();
      document.body.classList.toggle("sb-sidenav-toggled");
      localStorage.setItem(
        "sb|sidebar-toggle",
        document.body.classList.contains("sb-sidenav-toggled")
      );
    });
  }
});

React:

const [inactive, setInactive] = useState(false);

  useEffect(() => {

  })