How to rewrite URL on nextjs Page?

Question

PAGE CODE

export default async function SpecificAssetPage({
  params,
}: {
  params: SpecificAssetProps;
}) {
  const session = await getServerSession(authConfig);
  const userId = session?.user!.id;
  const assetId = params.id;

  try {
    const specificAsset = await getSpecificAsset(assetId!, userId!);
    return (
      <div className="mx-auto max-w-7xl space-y-4">
        <Breadcrumb
          crumbs={[
            { title: "Home", href: "/" },
            { title: "Assets", href: "/assets" },
            { title: specificAsset.name, href: `/assets/${assetId}` },
          ]}
        />
        <AssetsDetails asset={specificAsset} />
      </div>
    );
  } catch (error: unknown) {
    if (error instanceof Error) {
      if (error.message === "Asset not found") {
        notFound(); // FALL BACK TO 404 PAGE
      } else if (error.message === "Unauthorized access") {
        redirect("/assets"); // FALL BACK TO LOGIN PAGE
      }
    }
  }
}

ASSETS ACTION CODE

export async function getSpecificAsset(assetId: string, userId: string) {
  const specificAsset = await prisma.asset.findUnique({
    where: {
      id: assetId,
    },
  });

  if (!specificAsset) {
    throw new Error("Asset not found");
  }

  if (specificAsset.userId !== userId) {
    throw new Error("Unauthorized access");
  }

  return specificAsset;
}

Instead of redirecting the user to asset page when they don't have the access. I want to redirect the user to example PermissionRequired Page but then still keep the url they are trying to request.

For instance, if a user attempts to access localhost:3000/assets/123 and they don't have permission, you want to redirect them to localhost:3000/PermissionRequired while still keeping the URL in the browser as localhost:3000/assets/123.

How do I do that?