useNavigate not redirecting to a new page

So after entering data to a form, it should redirect to the /VisitorConfirmationPage with the data of the user stored in the object “formData”,but instead it refreshes the form page( the data has been sent to the server and database). The alert(‘added’) doesn’t always show up. Why is this happening?

    const navigate = useNavigate();

const addData=async()=>{

        var name = document.getElementById("inputName").value;
        var email = document.getElementById("inputEmail").value;
        var phoneNo = document.getElementById("inputPhoneNumber").value;
        var employee = document.getElementById("employee").value;
        // var image = p_image;
        const imageSrc = webcamRef.current.getScreenshot();
        setImageSrc(imageSrc);
        
        const response = await fetch(imageSrc);
        const blob = await response.blob();

        let formData = new FormData();
        formData.append("name", name)
        formData.append("email", email)
        formData.append("phoneNo", phoneNo)
        formData.append("employee", employee)

       
        formData.append("p_image",blob, "captured-image.jpg");

        

        axios.post("http://localhost:4000/api/registerVisitor",formData,{headers:{"Content-Type":"multipart/form-data"}}).then(response =>{
            alert('added');
            navigate('/VisitorConfirmationPage',{state:formData})
        }).catch(error => {
            console.error(error);
            alert("error!")
        });        
    }

I tried to move the navigate function outside the axios function. That didn’t work. I also tried this code inside the response of the axios response case and it didn’t work.

               <Link to={{
                pathname: "/VisitorConfirmationPage",
                state:formData
            }} />
            window.location = "/VisitorConfirmationPage";;