Error generating PWA manifest dynamically

Question

I'm trying to generate dynamically the manifest of my PWA in NextJS, but some fields on the manifest are not working. Here's an example. I have this code in the _app.tsx file:

useEffect( () => {
    const iconUrl = [
      {
          src: '/icon-192x192.png',
          sizes: '192x192',
          type: 'image/png'
      },
      {
          src: '/icon-256x256.png',
          sizes: '256x256',
          type: 'image/png'
      },
      {
          src: '/icon-384x384.png',
          sizes: '384x384',
          type: 'image/png'
      },
      {
          src: '/icon-512x512.png',
          sizes: '512x512',
          type: 'image/png'
      }
  ]
  const manifest = { 
    theme_color: '#f69435',
    background_color: '#f69435',
    display: 'standalone',
    scope: `/${restaurantData.slug}`,
    start_url: `/${restaurantData.slug}`,
    name: restaurantData.name,
    short_name: restaurantData.name, 
    icons: iconUrl, 
  }; 
    const content = encodeURIComponent(JSON.stringify(manifest)); 
    const url = 'data:application/manifest+json,'+content; 
    const element = document.createElement('link'); 
    element.setAttribute('rel', 'manifest'); 
    element.setAttribute('href', url); 
    document.querySelector('head')?.appendChild(element);
  }, [])

When I go to Application on the developer tools, I got this error: Error message from Application in Developer tools

I've tried many things, and I'm not able to solve this issue. I'll appreciate the help.