Stop propagation is called but nothing is happening after remaking the project

Question

I'm running the following code inside App.tsx:

const toggleMenu = (e) => {
e.stopPropagation();
setMenuVisible(!menuVisible);
setMenuPosition({ x: e.clientX, y: e.clientY });
};

and this is the return value:

return (
<div className="app-container" onClick={toggleMenu}>
  <div className="container w-full h-full" onClick={(e) => e.stopPropagation()}> //Added this onClick prop after I experienced the problem to see if it worked (it didn't)
  </div>
  {menuVisible && (
    <Menu
      x={menuPosition.x}
      y={menuPosition.y}
      handleClick={handlePopupClick}
    />
  )}

    {circles.map((circle, index) => (
      <Bubble
        id = {index}
        circle={circle}
        type={moduleType}
        handleRemoveCircle={handleRemoveCircle}
        handleOnClickSocket={handleOnClickSocket}
        setModuleType={setModuleType}
      />
    ))}
</div>
);

I did something wrong with pnpm dependencies so decided to build a project from scratch and copy all the src files (bc cleaning them apparently didn't work), somehow this made that whenever I click inside an element (even if it's in another element with an onClick prop) the menu appears as if I was click outside of it. Idk what's going on, this worked as expected before. Any ideas? Ty in advance.

I think that this video will help to understand what I'm saying: