How to throw a 404 status and a pretty page?

Using react router and have a route definition:

  {
       path: '/',
       element: <Root pageTitle={pageTitle} />,
       errorElement: <ErrorPage setPageTitle={updatePageTitle} />,
       children: [
          ...
          {
             path: '*',
             element: <ErrorPage setPageTitle={updatePageTitle} />,
             loader: async () => {
                console.log('throwing a 404');
                throw new Response('Not Found', { status: 404 });
             },
          },
       ],
    },

This does show me the 404 page how I want, but http status is reported as 200. How do I properly throw it as a 404?

It seems not to trigger the loader (console log does not appear), or is there another method to throw a 404 and show a pretty page?