How do I access .env variables after deploying my website using Github Actions?

This is my github actions yml file. After completion, the /build folder of my github repository is deployed to my linux server. But after that, my react website can't access the .env variable. When I look at the console in Chrome browser, I see that process.env.REACT_APP_API_URL is undefined. What's the problem? How can I fix the error?

name: Build & Deploy production server

on:
  pull_request:
    branches: 
      - main
    types: [closed]

jobs:
  build-deploy:
    name: Build & Deploy production server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on production server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
            TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"

I have over 10+ variables in .env file.

Oh, I found the solution and it works very well now. Let me provide my solution. Thanks all.

name: Build & Deploy on production server

on:
  pull_request:
    branches: 
      - main
    types: [closed]

env:
  REACT_APP_API_URL: ${{ vars.PRO_REACT_APP_API_URL }}
  REACT_APP_PUBLIC_NFT_STORAGE_API_KEY: ${{ vars.REACT_APP_PUBLIC_NFT_STORAGE_API_KEY }}
  REACT_APP_STRIPE_PRO_PRODUCT_ID: ${{ vars.REACT_APP_STRIPE_PRO_PRODUCT_ID }}
  REACT_APP_STRIPE_PRO_TRIAL_ID: ${{ vars.REACT_APP_STRIPE_PRO_TRIAL_ID }}
  REACT_APP_STRIPE_PUBLIC_KEY: ${{ vars.REACT_APP_STRIPE_PUBLIC_KEY }}
  REACT_APP_STRIPE_ESSENTIAL_ID: ${{ vars.REACT_APP_STRIPE_ESSENTIAL_ID }}
  REACT_APP_STRIPE_PRO_LITE_ID: ${{ vars.REACT_APP_STRIPE_PRO_LITE_ID }}
  REACT_APP_STRIPE_PRO_ID: ${{ vars.REACT_APP_STRIPE_PRO_ID }}
  REACT_APP_GIPHY_SDK_API_KEY: ${{ vars.REACT_APP_GIPHY_SDK_API_KEY }}
  REACT_APP_TINYMCE_API_KEY: ${{ vars.REACT_APP_TINYMCE_API_KEY }}
  REACT_APP_ENOKI_API_KEY: ${{ vars.REACT_APP_ENOKI_API_KEY }}
  REACT_APP_GOOGLE_CLIENT_ID: ${{ vars.REACT_APP_GOOGLE_CLIENT_ID }}
  REACT_APP_SUI_NETWORK: ${{ vars.REACT_APP_SUI_NETWORK }}
  REACT_APP_SUI_PACKAGE_ID: ${{ vars.REACT_APP_SUI_PACKAGE_ID }}
  REACT_APP_SUI_SETTING_ID: ${{ vars.REACT_APP_SUI_SETTING_ID }}
  REACT_APP_ADMIN: ${{ vars.REACT_APP_ADMIN }}

jobs:
  build-deploy:
    name: Build & Deploy Gallerai on production server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on production server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
            TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"

I used env context and defined all variables in Settings/Secrets and Variables.