Issues getting React Router to work in Symfony 6

Question

I seem to be having issues getting react-router working within a Symfony 6 installation inside a sub-directory.

The react router keeps throwing a 404 error for all routes:

> Object { status: 404, statusText: "Not Found", internal: true, data:
> "Error: No route matches URL \"/work/ls/public/\"", error: Error }
> app.0e8e7ca1.js:1:507

I have installed Symfony, WebPackEncoreBundle and created a ReactController and Twig template:

<?php
// src/Controller/ReactController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class ReactController extends AbstractController
{
    
    public function number(): Response
    {
        return $this->render('react/index.html.twig');
    }
    
    
}

The YAML route file is as follows:

react_controller:
    path: /{reactRouting}
    controller: App\Controller\ReactController::number
    defaults: { reactRouting: null }

Within webpack.config.js I have the following settings:

// enable react present
.enableReactPreset()
// directory where compiled assets will be stored
.setOutputPath('public/build')
// public path used by the web server to access the output path
.setPublicPath('/work/ls/public/build')

I've also tried adding "homepage" to package.json:

"homepage": "http://localhost/work/ls"

React code below:

import React from 'react';
import ReactDOM from 'react-dom/client';

import Dashboard from './components/Dashboard';
import Login from './components/Login';
import ErrorPage from './components/ErrorPage';

// Import router
import { createBrowserRouter, RouterProvider, useLocation } from 'react-router-dom';

const router = createBrowserRouter([
    {
        path: "/",
        element: <Dashboard />,
        errorElement: <ErrorPage />
    },
    {
        path: "/login",
        element: <Login />
    }
]);

const root = ReactDOM.createRoot(document.getElementById("app"));

root.render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

When creating a new React project separately from Symfony at the root directory, using the same code, the routing works as expected.

Can anyone see where I am going wrong?