Unable to get Install Icon in my Next.js Pwa Application

Question

I was creating an admin panel application in Next js and was asked to add PWA functionality after finishing up the setup. after following a bunch of fixes I am finally posting this as a last resort. Here is the folder structure I am following

and my manifest.json in public folder

    {
  "theme_color": "#861100",
  "background_color": "#FCD9D0",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/",
  "name": "demo Web App",
  "short_name": "MWP",
  "description": "web application for demo application",
  "icons": [
    {
      "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"
    },
    {
      "src": "/maskable.png",
      "sizes": "48x48",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

I tried running expale application and moving my code into it. it seems to have a problem with folder structure and I can't change it. do I have to follow another folder structure?