How to use AWS Amplify env vars in gatsby-config.js?

I am building an app with GatsbyJS. I am using environment variables in my gatsby-config.js. GatsbyJS app builds fine locally, by using .env.* files. However, when building from AWS Amplify it complains about an invalid value retrieved from environment variables. Indeed, it seems that when using process.env.MY_VAR inside gatsby-config.js the value retrieved is encrypted (as per AWSAmplify docs).

I tried with hardcoding the value of the env. var to confirm that encryption was the problem.The error that I am getting is:TypeError [ERR_INVALID_URL]: Invalid URL: 6fbaeed85a68.

Which clearly indicates that the value retrieved from process.env.HOSTNAME is 6fbaeed85a68 and not the actual value that I provided in AWS Amplify web's interface.

Below is my gatsby-js.config:

const path = require(`path`);const queries = require('./src/utils/algolia');const feedOptions = require('./src/utils/feed');require('dotenv').config({  path: `.env.${process.env.NODE_ENV}`,});module.exports = {  siteMetadata: {    siteUrl: new URL(process.env.HOSTNAME).href,    title: `APP_TITLE`,  },  plugins: [    {      resolve: `gatsby-source-kentico-cloud`,      options: {        deliveryClientConfig: {          projectId: process.env.KENTICO_PROJECT_ID,        },        languageCodenames: process.env.KENTICO_LANGUAGES.split(';'),      },    },    {      resolve: `gatsby-plugin-algolia`,      options: {        appId: process.env.GATSBY_ALGOLIA_APP_ID,        apiKey: process.env.ALGOLIA_ADMIN_KEY,        queries,        chunkSize: 10000,      },    },    `gatsby-plugin-react-helmet`,    `gatsby-plugin-sitemap`,    {      resolve: `gatsby-plugin-manifest`,      options: {        name: `APP_NAME`,        short_name: `APP_SHORT_NAME`,        start_url: `/`,        background_color: `#dbdcd1`,        theme_color: `#1ad2eb`,        display: `standalone`,        icon: `src/images/logo-simple-transp-square-260x260.png`,        include_favicon: true,      },    },    `gatsby-plugin-offline`,    {      resolve: `gatsby-source-filesystem`,      options: {        name: `images`,        path: path.join(__dirname, `src`, `images`),      },    },    `gatsby-transformer-sharp`,    `gatsby-plugin-sharp`,    {      resolve: `gatsby-plugin-sass`,      options: {        includePaths: ['src/styles/_variables'],      },    },    {      resolve: 'gatsby-plugin-mailchimp',      options: {        endpoint: process.env.MAILCHIMP_ENDPOINT,      },    },    {      resolve: 'gatsby-plugin-transition-link',      options: {        layout: require.resolve(`./src/layout`),      },    },    {      resolve: `gatsby-plugin-feed`,      options: feedOptions,    },    {      resolve: `gatsby-plugin-google-tagmanager`,      options: {        id: process.env.GTM_CODE,        includeInDevelopment: false,      },    },  ],};

I don't understand how I am supposed to retrieve env vars. Any help would be greatly appreciated.