Vercel's Rewrite function doesn't work in React

Am building an app that requires me to use a proxy server to connect with my backend server which is working perfectly locally. But when I wanna deploy, I saw that I need to create a vercel.json file and inside it will be my rewrites functions.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://zeeh.herokuapp.com/:path*"
    }
  ]
}

I have written this code here expecting vercel to proxy into my destination server but instead, It didn't do anything but to the port of which the app was hosted on.....

https://zeeh.herokuapp.com/api/test => The resource that I wanna access


(async () => {
      try {
        const { data } = await axios.get('/api/test');
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    })();

How it is being called

and I was expecting to see this called

https://zeeh.herokuapp.com/api/test

but this took over

https://el-menus.vercel.app/api/test

Start with the vercel.json rewrite configuration and the deployed axios request to /api/test. Reproduce the request against the deployed app, compare the observed /api/test behavior with the Heroku destination, and confirm that the rewrite forwards the request as intended.