Adding a second service worker breaks the app by constantly reloading it

[mtnair]

We recently wanted to add the Firebase Messaging Service Worker to our app, but when doing so, the app keeps reloading constantly after an update of the has been released.
I created a demo repo which should demonstrate the problem, please have a look: https://github.com/mtnair/vite-pwa-firebase-sw
I also recorded a short screen cap for you to see the behavior we are experiencing: https://imgur.com/a/8WQbUJX

The only things changed in this demo repository are:

• vite.config.ts: Added VitePWA({ registerType: 'autoUpdate' })
• App.tsx: Added useRegisterSW() hook
• main.tsx: Added Firebase Service Worker registration
• firebase-messaging-sw.js: Added file (without our Firebase credentials, if it is relevant, add your own credentials for testing)
• Added command for fast production building and preview all-in-one: npm run bp

I also found this issue. I suspect the suggested solution in this issue would help us too, but I don't really know how to create our own service worker based on the default service worker from vite-plugin-pwa (which we're pretty happy with) to not break anything.
The documentation has not really helped me customizing the default sw.

Any help or hint into the right direction is much appreciated!