Using top level route registration doesn't work with UseSpa

Question

I have a .NET 6 SPA project that uses endpoint routing, with the following Program.cs code:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();

    endpoints.MapControllerRoute(
       name: "default",
       pattern: "{controller}/{action=Index}/{id?}");
});


app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    }

});

app.Run();

This code runs fine, but now I'm updating the project to .NET 7 and I got this warning: Suggest using top level route registrations instead of UseEndpoints. I changed the UseEndpoints code to this:

app.MapControllers();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

However, this change completely breaks my routing, and calling any API endpoints give me a 404. Navigating to any API endpoint from my browser returns my SPA. If I remove the call to UseSpa the routing works fine.

How can I get this to work?

EDIT: I am aware that I can remove UseSpa and instead proxy from the other direction, in my frontend project. This seems to be the new recommended approach, as described in this answer What is the difference between UseStaticFiles, UseSpaStaticFiles, and UseSpa in ASP.NET Core 2.1?. However I am used to my current setup and I would like to continue to use UseSpa. Is that not possible anymore?