React Router Dom hitting wrong endpoint

I have a redux action which fires whenever a user on a site tries to change their profile. It does this through an api call middleware that I wrote using a tutorial from Mosh.

export const updateUserProfile =
  ({ id, name, email, favouriteThing, password, confirmPassword }, headers) =>
  (dispatch) => {
    dispatch(
      apiCallBegan({
        url: `api/users/profile`,
        data: { id, name, email, favouriteThing, password, confirmPassword },
        headers,
        method: 'put',
        onStart: userUpdateRequested.type,
        onSuccess: userUpdateReceived.type,
        onError: userUpdateFailed.type,
      })
    );
  };

The app routes are like this:

          <Route path='/profile' render={ProfileScreen} exact />
          <Route path='/profile/page/:pageNumber' render={ProfileScreen} exact/>

I have pages on the profile page route because I have a React component which displays all the items that the user has created in a table, and I need the table to handle multiple pages. I couldn't figure out how to make a single component within a page change pages without changing the whole page, so I made it that the whole page changes.

The endpoint is this:

router
  .route('/profile')
  .put(protect, updateUserProfile);

I submit the new data using a submit handler which looks like this:

  const submitHandler = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      setMessage('Passwords do not match');
    } else {
      dispatch(updateUserProfile(data, headers));
    }
  };

This all works fine when I am at this URL: http://localhost:3000/profile

When I go to page 2 of the profile this is the URL: http://localhost:3000/profile/page/2 and I get the following error:

404 Not Found trying to reach /profile/page/api/users/profile

I logged location.pathname when the submitHandler is triggered and I get '/profile' which appears correct. However when I log the req.originalURL at the error middleware in express I get /profile/page/api/users/profile

So something is changing the originating URL between when the function is called in the frontend and how it is received in the backend.

Is there anyway to keep req.originalURL at '/profile' irrespective of what page of the profile I am on? I have tried using the Switch component in React Router Dom and setting the location of profile pages route to '/profile' but this breaks the profile pages route and the profile page won't load at all when you click on next page.

I've done a lot of googling and testing in the app and I can't seem to think of anything, which makes me think I have a fundamental misunderstanding of what is going on here. I'd really appreciate some help if someone has any thoughts.