Newbie please help: My 404 page shows right locally, but having problems in vercel

So here is the thing, I have a nextjs app and everything works fine on displaying 404 page in my localhost and navigating back to homepage (or other pages) but in vercel hosted app this is what's happening:

1. I go to some /gibberish route
2. my custom 404 page is shown
3. I try to go to the homepage via "Link href='/'"
4. The route changes back from '/gibberish' to '/' which is my homepage,
5. The 404 component view keeps being rendered in the homepage and doesn't change.
6. Clicking the back to homepage button does nothing, and if I navigate through the app and go back to homepage the 404 component is still showing instead of my homepage. I have a layout wrapping the content and also the page and the not-found component as suggested by next