useNavation removes the url sub paths instead of adding the routing page

I have asp.net mvc application that serves the react app under the following url: http://domain.fake/controller/action. Here is the routing of the react app:

<Routes>
 <Route path="/*" element={<Config />}>
   <Route path="values" element={<ConfigKeyValues />} />
 </Route>
</Routes>

When I try to navigate to the values route using useNavigate hook:

const nav = useNavigate();
nav("new");

In the url, instead of adding the /new path, the routing removes the whole controller/action path and only set the /new path. So instead of getting the url http://domain.fake/controller/action/new i’m getting http://domain.fake/new and this is not right. I’m able to display the component correctly and i’m not being redirected by the server but the url is wrong because i can’t share that since it does not exists.

How can prevent the react routing from replacing the base path but adding the new path to the url and display the component of that route?