React make parent Route inaccessible

Question

I have a React app with React Router v6, my routes are as follows

<Route path="/checkout" element={<CheckoutLayout />} >
  <Route path="shipment" element={<ShipmentPage />} />
  <Route path="payment" element={<PaymentPage />} />
</Route>

With these routes I can access 3 routes

/checkout
/checkout/shipment
/checkout/payment

I want the first route to be inaccessible, because it's a layout with an Outlet, how can I achieve this?

<>
  <h1>Header</h1>
  <Outlet />
  <h1>Footer</h1>
</>

Edit: In CheckoutLayout I wrote

export const CheckoutLayout = () => {

  if (window.location.href === `url/checkout`) {
    return <Navigate to="/checkout/payment" />
  }

  return <div></div>
}