I'm trying to recreate the instagram shallow routing logic, which looks like this:

1. user is on the instagram.com/p/cristiano.
2. clicks on one of the pictures.
3. url changes to instagram.com/p/Cd0..., instead of being taken to detail page, user is presented with modal
4. on modal exit url changes back to instagram.com/p/cristiano.

Here is how I'm trying to recreate this logic:

shallowRoutingOrigin is the page from where I am opening the modal: could be either savedworkouts,discovery or u/${username}

  const handleShallowRoutingClick = (documentId: string) => {
    router.push(
      `/${shallowRoutingOrigin}?documentId=${documentId}`,
      `workoutpreview/${documentId}`,
      {
        shallow: true,
      }
    );
    setModalIsOpen(true);
  };

  const handleModalClose = () => {
    router.push(`/${shallowRoutingOrigin}`, undefined, {
      shallow: true,
    });
    setModalIsOpen(false);
  };

The following logic and desired effect works on savedworkouts and discovery pages, however when I try to open the modal from u/${username}, instead of masking. url as /workoutpreview/id1 it masks as /u/workoutpreview/id1 and I get 404 this page not found error.

What makes this logic not work on the user page?