Hi, @mrinnnmoy! Welcome to the Vercel Community 
Thank you for providing such a detailed description of your issue. It seems you’re very close to the solution!
The problem lies in the vercel.json configuration you’ve tried. Instead of using routes, Vercel recommends using rewrites for single-page applications like yours. Here’s the correct configuration:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
Replace the content of your vercel.json file with this configuration. This tells Vercel to serve your index.html for all routes, allowing React Router to handle the routing on the client side .
After making this change, commit and redeploy your application. This should resolve the 404 errors you’re experiencing when accessing routes directly.
If you encounter any issues after this change, please let me know, and I’ll be happy to help you troubleshoot further!