Project Tracking Main, first Mobile using React with Vite

To fix the functionality for the mobile menu, remove;

const mobileContainer = document.querySelector(".mobileContainer")
    const [visible, setVisible] = useState(false)
    const mostrar = () =>{
        if(visible == false){
            mobileContainer.style.visibility = "visible"
            setVisible(visible = true)
        }else{
            mobileContainer.style.visibility = "hidden"
            setVisible(visible = false)
        }
    }

I don't think you need that, replace it with this;

const mostrar = () => {
    document.querySelector(".mobileContainer").classList.toggle("active");
  }

Then on your css, I removed visibility, and used display:none, then toggled it, like this;

.mobileContainer {
  display: none;
}

.mobileContainer.active {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  min-height: 40vh;
  width: 80%;
  margin-left: 10%;
  position: fixed;
  background-color: white;
  box-shadow: 0 0 20px -5px black;
  border-radius: 5px;
}

That seemed to do the trick, and I am not sure what mostrar is, when naming your functions or anything for that matter try using descriptive words, rather than mostrar, something like toggleMobileMenu for the function would have been way better, because that is what it does, it toggles the mobile menu.