how do i accurately track mouse movement on a window?

Question

Right now i am working on a way to update the state of an element based on IF the mouse is down as well as if the mouse is over the element. This means that once the mouse is down, every time it hovers over one of the elements , the state changes.The tracking is inaccurate, it does not capture every single action. How do i better the process? The code for my present implmentation is:

document.onmousedown = () => {
      document.onmousemove = (e) => {
        if (e.buttons === 1) {
          let svg = e.target as HTMLElement;
          if (svg.id.startsWith('svg')) {
            let SVG_ID = svg.id;
            let HoverPropsID = svg.id.replace('svg', 'props');
            if (document.getElementById(HoverPropsID).classList.contains('no-node')) {
              toRemove.forEach(element => document.getElementById(SVG_ID).classList.remove(element));
              document.getElementById(SVG_ID).classList.add(`svg-${node}`);
              document.getElementById(HoverPropsID).classList.remove('no-node');
              document.getElementById(HoverPropsID).classList.add(node);
              multiNodeGraphUpdate(node, Number(HoverPropsID.substring(HoverPropsID.lastIndexOf('-') + 1)), 10, false)
            }
            nodeHoverAnimation(HoverPropsID);
          }
        }
      }

I understand that the information i have provided might be a big ambiguous, so i am linking two website, one is the inspiration website: https://clementmihailescu.github.io/Pathfinding-Visualizer/

and the other one is the WiP webiste (my one):https://aarnavv.github.io/Vagus/