Tanstack Start app with css (scss) modules with troubles using defaultNotFoundComponent

// NotFound.tsx
import { Link } from '@tanstack/react-router';

import Image404 from './404.png';
import styles from './NotFound.module.scss';

export const NotFound = () => {
  return (
    <div className={styles.wrapper}>
      <img src={Image404} alt="404" width={300} height={287} />

      <div>
        <h2 className={styles.heading}>Oops, seems like the page has gone missing!</h2>
        <p className={styles.body}>Lorem ipsum dolor...</p>
      </div>

      <Link to="/">Back to start</Link>
    </div>
  );
};

// router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router';

import { routeTree } from './routeTree.gen';
import { NotFound } from '../components/NotFound/NotFound';

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultNotFoundComponent: () => <NotFound />,
  });

  return router;
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  tsr: {
    appDirectory: 'src/app',
  },
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }) as any, // TODO fix this
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@our-ui-library/styles/all.module.scss";`,
        },
      },
    },
  },
})