URL for my static website gives NOT FOUND

Question

I am trying to make a simple URL Shortener and I have hosted my app using render ( https://shortner-5c7m.onrender.com/ ). So what I've done is make a redirect page on "/:urlId" which takes url Id from useParams and gets url from backend and redirects. But there is a problem when I use that url saperately (https://shortner-5c7m.onrender.com/e0727599-5616-4e24-9971-3cf6239a567b) it shows not found. And I think this is because it is a static service and uses client side routing. I tried redirecting rules but it doesn't help.

Attached code is my App.tsx. As you can see i am using urlId params in Redirect page to retrieve url from backend and redirect user to that. But the problem is that when I go to the link For Example: https://shortner-5c7m.onrender.com/e0727599-5616-4e24-9971-3cf6239a567b It shows NOT FOUND, I am assuming it is because client side routing doesn't know "/:urlId" route directly. Any solutions for this problem?

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Signin from './pages/Signin';
import Signup from './pages/Signup';
import AddLink from './pages/AddLink';
import Redirect from './pages/Redirect';

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/signin' element={<Signin />} />
        <Route path='/signup' element={<Signup />} />
        <Route path='/addlink' element={<AddLink />} />
        <Route path='/:urlId' element={<Redirect />} />
      </Routes>
    </Router>
  );
}

export default App;