React, 404 not found on password request update

I am trying to learn nodejs and react with mongodb. I have setup what I know is (sketchy) but a so far working login, signup, and password reset system. Currently with the password reset system one the user recieves the email and tries to update there password. I get a 404 not found. I have tried multiple different combinations of ways I can think of, looked at other stack over flow questions, visted a youtube tutorial and asked chatgpt who had a stroke.

reset password function from auth controller

    try {
   const token2 = crypto.createHash('sha256').update(req.params.token2).digest('hex');
   const user = await User.findOne({passwordResetToken: token2, passwordResetTokenExpires: { $gt: Date.now() } });

  if(!user) {
    return next(errorHandler(401, 'Token wrong or invalid!'));
   
  }

  const newPassword = req.body.password;
  const hashedPassword = await bcryptjs.hash(newPassword, 10);
  user.password = hashedPassword;
  user.passwordResetToken = undefined;
  user.passwordResetTokenExpires = undefined;

  user.save();


  const logintokeen = signToken(User._id);

  res.status(200).json({
    status: 'success',
    token: logintokeen
  })
} catch (error) {
  next(error);
 }
}``

``router.post('/signup', signup);
     router.post('/signin', signin);
     router.post('/google', google);
     router.get('/signout', signout);
     router.post('/forgotPassword', forgotPassword);
     router.patch('/resetPassword/:token2', resetPassword);
     router.post('/newpassword/:token2', resetPassword);
     export default router;``
Newpassword page 
``export default function Newpassword() {
  const [formData, setFormData] = useState({});
  const [password, setPassword] = useState('');
  const navigate = useNavigate();
  const { token2 } = useParams();
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const hashedPassword = bcryptjs.hashSync(password, 10);
      const res = await fetch(`/resetPassword/:token2`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ hashedPassword }),
      });
      if (!res.ok) {
        throw new Error(`Error: ${res.status}`);
      }
      const data = await res.json();
      if (data.success === false) {
        console.log('failed');
        return;
      }
      navigate('/');
    } catch (error) {
      console.log(error);
    }
  };

  const handleChange = (e) => {
    setPassword(e.target.value);
  };

  return (
<div>
      <h2>Enter Your new Password</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="password">New password</label>
          <input
            type="password"
            id="password"
            placeholder="Enter your new password"
            className='bg-slate-100 p-3 rounded-lg'
            onChange={handleChange}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};``
App js 
``

export default function App() {
  return (
    <BrowserRouter>
      {/* header */}
      <Header />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/sign-in' element={<SignIn />} />
        <Route path='/sign-up' element={<SignUp />} />
        <Route element={<PrivateRoute />}>
          <Route path='/profile' element={<Profile />} />
          <Route path='/forgotpassword2' element={<Forgotpassword2 />} />
          <Route path='/newpassword/:token2' element={<Newpassword />} />
          <Route path='/resetpassword/:token2' element={<Newpassword />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );``