Using serviceworker and workbox in react app

I'm trying to make a react pwa app using the service workers and Google workbox. The custom-service-worker file is in the /public folder of the react app and the default ServiceWorker.js file create by react app is in the /src.
I'm getting below error. Any idea on why this error is occuring? Should I refer to the custom-service-worker.js file in the index.html file?

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://127.0.0.1:8080/precache-manifest.293755a47c2781150c8b4c921fc7a770.js' failed to load.
    at http://127.0.0.1:8080/service-worker.js:16:1

Here is the content of the service-worker file:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
  workbox.routing.registerRoute(
    // Cache CSS files.
    /\.css$/,
    // Use cache but update in the background.
    new workbox.strategies.StaleWhileRevalidate({
      // Use a custom cache name.
      cacheName: 'css-cache',
    })
  );
  workbox.routing.registerRoute(
    new RegExp('https://jsonplaceholder.typicode.com/posts'),
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'app-cache',
    })
  );