Workbox backgroundSync processing order issue when the user comes online

Question

I'm using the Vue 3 VitePWA plugin with the generateSW strategy, and having a background sync event on one endpoint like this:

{
    urlPattern: ({ url }) => { return url.pathname.startsWith('/api/tables.php')},
    handler: 'NetworkOnly',
    method: 'POST',
    options: {
        backgroundSync: {
            name: 'api-queue',
            options: {
                maxRetentionTime: 24 * 60,
            },
        },
    },
}

My issue is that when the internet connection is lost, and some requests accumulate in the background sync, when the internet is restored, they start to be sent in order. But if the user makes a new request, it gets processed immediately because there is already an internet connection. This is why the new request doesn't go to the end of the queue but is inserted somewhere in the midst of sending requests.

How could I make it so that the new request also queues up and waits until the older ones finish sending?