How can I create React route without rendering any component?

Question

Greeting from my side.. I am very new to react and I have one functionality that I create a one unique route in react and on that url hit I need to call a api which do some work for me.

According to me I create a empty component and in return I am returning React Fragment only and on the useEffect of that component I try to hit my api .

but the problem is that my api hits two times but I need to api hit only once and redirect to some path.

useEffect(()=>{
        const verifyEmail = () =>{
            const url = "myurl"
            const config = {
                headers:{
                    "secret_key":"mykey",
                    "Content-Type":"application/json",
                }
            }
            const data = {
                id:id
            }
            axios.post(url,data,config)
            .then(
                (response) =>{
                    console.log(response.data)
                    const result = JSON.parse(response.data)
                    if(result.code === 1){
                        alert(result.message)
                        navigate("/")
                    }else{
                        alert(result.message)
                        navigate("/")
                    }
                }
            ).catch((error) =>{
                alert("something went wrong")
            })
        }
        verifyEmail()
    return () => {
            cleanup
        }
    },[])

How can I achieve it ? or is I am doing something wrong ? guide me