How can I configure FastAPI to let the node frontend handle deep path routing like /foor/bar for a SPA application

Question

I am building a frontend using Node.js (Vite+Lit) and I am using FastAPI for the backend. I want FastAPI to be the web server and have the frontend js files loaded from the 'static' folder. I am using Vaadin router to handle routing the path. This is working fine when navigating from the first level path (like /foo). But, if I enter a path like '/foor/bar' the page doesn't load properly.

I am using the below code for the frontend navigation.

app.mount(
    "/static", StaticFiles(directory=f"{frontend_path}/static", html=True), "static"
)

@app.get("/{path:path}")
async def react_app(req: Request, path: str) -> Response:
    """Define a route handler for `/*` essentially."""
    return templates.TemplateResponse("index.html", {"request": req})

In the logs I am seeing that when a deep path is used FastApi tries to fetch the js files from a folder relative to the path. For example if the path is /foo/bar, I see in the logs GET /foo/static/index.js. While if the path is only one level /foo the files are fetched correctly /index.js and the page renders correctly.