Basic page routing doesn't seem to work as expected - App Router

I have my resolver set like so

{
    type: "homepage",
    path: "/",
  },
  { type: "page", path: "/:uid" },
  { type: "subpage", path: "/:uid/:uid", resolvers: { page: "parent" } },

If I navigate to a page that's not there, I get the below error when I would expect to see a 404 instead.

What am I doing wrong?

This is inside /app/[uid]/page.tsx

export default async function Home({ params }: { params: Params }) {
  const client = createClient();

  const page = await client.getByUID("page", params.uid, {
    fetchOptions: {
      next: { revalidate: 0 },
    },
  });
  return (
    <main>
      <section className="py-6 relative">
        <div id="strapline relative max-w-7xl mx-auto z-10">
     
          <h1 className="text-6xl font-semibold text-center whitespace-pre-wrap text-neutral-200">
            {page.data.title}
          </h1>
          {page.data.description && (
            <p className="mt-5 text-center max-w-4xl mx-auto font-normal text-neutral-200 text-md">
              {page.data.description}
            </p>
          )}
        </div>
      </section>
      <SliceZone slices={page.data.slices} components={components} />
    </main>
  );
}

Just tried with a fresh install of NextJS and Slice Machine. Also a new repo and still does the same.

Anyone have a workaround for returning 404s for these pages?

Here's a similar post: