No matching service worker detected when using GenerateSW from webpack-workbox-plugin

I include

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

in the plugins of my webpack config but receive this warning when running lighthouse on my website.

Web app manifest or service worker do not meet the installability requirements 1 reason

Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement

Failure reason -- No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

Does not register a service worker that controls page and start_url The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.

I can see that the service worker is running in my console, because it prints

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         108 URLs, totaling 10.4 MB.

All solutions I can find on this talk about editing the sw.js file or something. I thought the point of the GenerateSW function was that I didn't have to worry about creating a sw.js or anything

I am also using WebpackPWAManifest

    new WebpackPwaManifest({
      icons: [
        {
          src: Icon192,
          sizes: "192x192",
          type: "image/png",
          purpose: "any maskable",
        },
        {
          src: Icon512,
          sizes: "512x512",
          type: "image/png",
        },
      ],
      name: "Example",
      short_name: "Example",
      orientation: "portrait",
      start_url: "/",
      scope: "/",
      theme_color: "#ffffff",
      background_color: "#ffffff",
      description: "Example",
      display: "standalone", 
      prefer_related_applications: false, 
    }),

UPDATE: I am able to fix this issue by adding this to my App.jsx

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('/service-worker.js');
    });
}

but if I do this, then updates to my website in development mode aren't registered, for ex, I'll change some text from "TODO " to "TODO: " and refresh the page, but the page will still display "TODO "