show 404 error page when the user is not found on the base of id in MERN App

I have a Mern app using react-router 6 and in it, I want to show a 404 error page when the user is not found on the base of id. I have a 404 page set up in the router in the following way:

<Routes>

//all the routes of the app
<Route path='*' element={<NotFound />} />

</Routes>

my user route is following:

<Route path='/user/:id'element={<UserProfile />} />

Now, if the path does not match any of the routes it shows the 404 error page and if the user id is correct it shows the user profile component and everything works fine as it is supposed to. The problem occurs when you enter an incorrect user Id in the params of the URL like "user/randomId" which does not exists in the database the page breaks and I get the following error:

cast to object failed for value "randomId" (type string) at path "id" for modal User

Now my user profile controller is as follows:

exports.getUserProfile = async (req, res) => {
try {
  const user = await User.findById(req.params.id).populate(
  'posts followers following'
 );

if (!user) {
  return res.status(404).json({
    success: false,
    message: 'User not found',
  });
}

res.status(200).json({
  success: true,
  user,
});
} catch (error) {
 res.status(500).json({
  success: false,
  message: error.message,
});
}};

Now I am getting the error because of the 500 interval server error which means it goes straight to catch block because may be the Id format is invalid or something. I want to know how can i show the 404 error page when the userId in the params does not match any thing in the db. also I have the my get route "user/id" at the end in the router file so i don't think its the case of route mismatching.