What are the steps that I should follow to deploy my React project with the help of ADO pipeline YAML. I need help for ENV files.

In my local source project, I use {process.env.variablename} to load variables from env file and Create React App is used to create project hence I didn’t add any dotenv package. Everything works fine in local and I see that variable contents are loaded from env file but in pipeline I followed below steps to load and I don’t see that variables are loading from env files in my site but I see the env file getting copied into server. Why is it not loading? I have added my .env.development file under secure files section of library tab in ADO.

steps:
      - checkout: FoodApp

      - task: UseNode@1 
        inputs:
          version: '20.15.1'
          
      - task: DownloadSecureFile@1
        displayName: 'load env files'
        inputs:
          secureFile: '.env.development'

      - task: CopyFiles@2
        inputs:
          SourceFolder: '$(Agent.TempDirectory)'
          Contents: '.env.development'
          TargetFolder: '$(Build.SourcesDirectory)FoodApp'
          OverWrite: true
        displayName: 'copy .env.development to project root'
        
      - task: Npm@1
        displayName: 'npm install dotenv'
        inputs:
          command: 'custom'
          customCommand: 'install dotenv'
          workingDir: '$(Build.SourcesDirectory)FoodApp'

      - task: CmdLine@2
        inputs:
          script: |
           node -e "require('dotenv').config({ path: './.env.development' });"
          workingDirectory: '$(Build.SourcesDirectory)FoodApp'
        displayName: 'Load environment variables from .env.development file'

      - task: PowerShell@2
        inputs:
          targetType: 'inline'
          script: |
             Get-ChildItem -Path Env:* | Sort-Object -Property Name
        displayName: 'Display environment variables'
         
      - task: Npm@1
        displayName: 'cache verify'
        inputs:
         command: 'custom'
         workingDir: '$(Build.SourcesDirectory)FoodApp'
         customCommand: 'cache verify'


      - task: Npm@1
        displayName: 'npm clean'
        inputs:
          command: 'custom'
          workingDir: '$(Build.SourcesDirectory)FoodApp'
          customCommand: 'rm -rf node_modules'

      - task: Npm@1
        displayName: 'npm install'
        inputs:
         command: 'install'
         workingDir: '$(Build.SourcesDirectory)FoodApp'

      
      - task: CmdLine@2
        displayName: 'Check Node.js version'
        inputs:
         script: 'node -v'
         workingDirectory: '$(Build.SourcesDirectory)FoodApp'

   
      - task: Npm@1
        displayName: 'run build'
        inputs:
           command: 'custom'
           workingDir: '$(Build.SourcesDirectory)FoodApp'
           customCommand: 'run build --mode development'
      
      - task: CopyFiles@2
        displayName: 'Copy React files'
        inputs:
          sourceFolder: '$(Build.SourcesDirectory)/FoodApp/build' 
          Contents: '**/*'
          TargetFolder: '$(Build.ArtifactStagingDirectory)/_PublishedWebsites/FoodApp'
          cleanTargetFolder: true
          
      - task: CopyFiles@2
        displayName: 'Copy .env.development file'
        inputs:
          sourceFolder: '$(Build.SourcesDirectory)/FoodApp/'
          Contents: '.env.development'
          TargetFolder: '$(Build.ArtifactStagingDirectory)/_PublishedWebsites/FoodApp'
          cleanTargetFolder: false