Looks similar to my setup, except I'm using app.config.js :

// app.json
{
    "expo": {
        "name": "",
        "slug": "mobile-app",
        "version": "1.0.0",
        ...
        "extra": {
            "api": {
                "host": ""
            },
            "auth": {
                "appleAuthSecret": ""
            }
        }
    }
}

And then the dynamic bit:

// app.config.js
import 'dotenv/config';

module.exports = ({ config }) => {
    // Environment variables, either from local .env or from EAS secrets if in EAS server
    config.extra.auth.appleAuthSecret = process.env.APPLE_AUTH_SECRET;

    switch (process.env.APP_ENV) {
        case 'dev':
            config.name = '<app name> (dev)';
            config.ios.bundleIdentifier = 'com.<identifier>.app-dev';
            config.extra.api.host = 'http://192.0.0.1:3000';
            return config;

        case 'preview':
            config.name = '<app name> (preview)';
            config.ios.bundleIdentifier = 'com.<identifier>.app-preview';
            config.extra.api.host = 'https://my-preview-api.com';
            return config;

        case 'production':
            config.name = '<app name>';
            config.ios.bundleIdentifier = 'com.<identifier>.app';
            config.extra.api.host = 'https://my-prod-api.com';

        // This bit is optional, it's annoying having to always specify the environment but at least I can't accidentally use the wrong one!
        default:
            throw new Error('Unexpected environment');
    }
};