How to use different .ebextensions config files for different environments in Elastic Beanstalk?

I successfully deployed my first application to Elastic Beanstalk with CodePipeline and CodeBuild. For setting up the environment variables I used a .config file inside the .ebextensions directory and everything worked fine. But I need to maintain two sets of the same environment variables for two different environments. I can't figure out that part.

Below are what I've done so far and what I'm trying to do.

In my .ebextensions directory I have two config files where I'm planning to set environment variables according to development and production environments. The problem is I can't figure out how to do this.

.ebextensions/
   - env_dev.config
   - env_prod.config

I'm using two CodePipeLines for deployments.

• Main branch -> production (need to use env_prod.config)
• Dev branch -> development (need to use env_dev.config)

env_dev.config:

option_settings:
  aws:elasticbeanstalk:application:environment:
    var1: val1
    var2: val2

env_prod.config:

option_settings:
  aws:elasticbeanstalk:application:environment:
    var1: val3
    var2: val4

Is this possible with this approach? If it is, how can I proceed from here? Any other solutions or suggestions for doing this are also welcome. Thank you.

Update:

Below is my buildspec.yml:

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g typescript
  pre_build:
    commands:
      - echo Installing source NPM dependencies and H5P core...
      - npm install
      - pip install --upgrade awscli
  build:
    commands:
      - echo Build started on `date`
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
artifacts:
  files:
    - build/**/*
    - package.json
    - package-lock.json
    - node_modules/**/*
    - .ebextensions/**/*