Laravel 11 + Inertia + React + bootstrap ... Clicking Link results in full page load

When I click a Link (<Nav.Link as={Link} ...>), I get a full page load.

Here is the Navigation.jsx component:

import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import { Link } from "@inertiajs/react";

const Navigation = () => {
  return (
    <Navbar
      expand="md"
      className="navbar navbar-expand-md navbar-dark bg-primary"
    >
      <div className="container-fluid">
        <Navbar.Brand className="text-white">[email protected]</Navbar.Brand>
        <Navbar.Toggle
          aria-controls="basic-navbar-nav"
          className="text-white"
        />
        <Navbar.Collapse id="basic-navbar-nav" className="text-white">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/customers" className="text-white">
              Customers
            </Nav.Link>
            <Nav.Link as={Link} to="/invoices" className="text-white">
              Invoices
            </Nav.Link>
            <Nav.Link as={Link} to="/payments" className="text-white">
              Payments
            </Nav.Link>
          </Nav>
          <Nav className="float-md-right">
            <Nav.Link as={Link} to="/logout" className="text-white">
              Logout
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </div>
    </Navbar>
  );
};

export default Navigation;

Here are the web.php routes:

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function() { return Inertia::render('Customers'); });
Route::get('/customers', function() { return Inertia::render('Customers'); });
Route::get('/invoices', function() { return Inertia::render('Invoices'); });
Route::get('/payments', function() { return Inertia::render('Payments'); });
Route::get('/lineItems', function() { return Inertia::render('LineItems'); });
Route::get('/logout', function() { return Inertia::render('Logout'); });

Any ideas?