Unavailable nested routes not throwing 404 page

import { Link, Outlet } from '@tanstack/router';
// import React from 'react'
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

const Navbar = () => {
  return (
    <>
      <nav className='bg-slate-800 px-6 py-3 text-lg text-slate-300 mb-6'>
        <ul className='flex items-center gap-10'>
          <li>
            <Link
              to='/'
              activeProps={{
                className: 'text-slate-100 font-semibold',
              }}
            >
              Home
            </Link>
          </li>
          <li>
            <Link
              to='/about'
              activeProps={{
                className: 'text-slate-100 font-semibold',
              }}
              search={{ lines: 10 }}
              activeOptions={{
                includeSearch: false,
              }}
            >
              About
            </Link>
          </li>
          {/* <li>
            <Link
              to='/posts'
              activeProps={{
                className: 'text-slate-100 font-semibold',
              }}
            >
              Posts
            </Link>
          </li> */}
        </ul>

        <TanStackRouterDevtools position='bottom-left' />
      </nav>

      <Outlet />
    </>
  );
};

export default Navbar;