Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': parameter 2 is not of type 'Response'

Question

  const addDataIntoCache = (cacheName, url, response) => {
    // Converting our response into Actual Response form
    const data = new Response(JSON.stringify(response));
    console.log(data);
    if ("caches" in window) {
        // Opening given cache and putting our data into it
        caches.open(cacheName).then((cache) => {
            cache.put(url, data);
            alert("Data Added into cache!");
        });
    }
}
addDataIntoCache(
  "MyCache",
  "https://www.abcd.dev/",
  "SampleData"
)

While executing the above block of code in a create react app inside a useEffect() callback, I am getting an error as below Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': parameter 2 is not of type 'Response'.

The same block if execute in a local js and index.html , I am able to create a cache with no error Even on codesandbox create-react-app I am not getting any error and I am able to successfully store the response in the CacheStorage