How can i access my react VITE ENV variables in production of an azure static web app?

locally i use a .env file and do the following:

const value = import.meta.env.VITE_VALUETOGET
console.log("value", value )

When i go to production however i use the azure portal configuration app settings and added VITE_VALUETOGET with the value, this doesn't work because i get undefined if i try to log it.

I also tried to use pipeline to deploy the app and export the values from azure vault before i deploy it but nothing seems to work, process.env neither.

I also tried vite.config.js:

export default defineConfig({
  mode: 'production',
  plugins: [
    react(),

    // Add the replace plugin to inject environment variables
    replace({
      'import.meta.env.VITE_VALUETOGET': JSON.stringify(process.env.VITE_VALUETOGET)
    }),
  ],
});

> Access env variables from Azure Static Web App · Discussion Variables.
VITE ENV variables in the production of an Azure static web app.Used this reference for Building for Production

   const value = import.meta.env.VITE_VALUETOGET  
     console.log('process.env', process.env);

• Refer this Env Variables and Modes

   {  
     "NODE_ENV": "production",  
     "PUBLIC_URL": "",  
     "FAST_REFRESH": true  
   }

• Use Environment Variables in Vite.The startup command contains npx serve -l 8080 .

• For other details refer this How to load environment variables from .env file using Vite.