WebdriverIO config file for multiple browsers

I need to run test cases on multiple browsers, while using webdriverIO. Despite going through several articles and documentation of WDIO, I couldn't find a way in which works.

this is my wdio.conf.js.

var path = require("path");

exports.config = {
    baseUrl: 'http://127.0.0.1:8100/',
    path: '/wd/hub',
    specs: [
        './e2e/**/*-wdio.e2e-spec.ts'
    ],
    exclude: [],
    inspect: true,
    maxInstances: 10,
    // capabilities: [
    //   {
    //       browserName: 'Chrome',
    //   }
    //   // , {
    //   //     browserName: 'Firefox',
    //   // }
    // ],
    capabilities: {
        myChromeBrowser: {
            desiredCapabilities: {
                browserName: 'Chrome',
                // maxInstances: 1,
                // port: 8100
            }
        },
        myFirefoxBrowser: {
            desiredCapabilities: {
                browserName: 'Firefox',
                // maxInstances: 1,
                // port: 8100
            }
        }
    },
    
    sync: true,
    // Level of logging verbosity: silent | verbose | command | data | result | error
    logLevel: 'verbose',
    coloredLogs: true,
    deprecationWarnings: true,.
    bail: 0,
    screenshotPath: './errorShots/',
    waitforTimeout: 10000,
    connectionRetryTimeout: 60000,  // Default timeout in milliseconds for request if Selenium Grid doesn't send response
    connectionRetryCount: 3, // Default request retries count
    services: ['selenium-standalone'],
    framework: 'jasmine', // Make sure you have the wdio adapter package for the specific framework installed
    reporters: ['spec'],  // see also: http://ift.tt/2AGROPU
    reporterOptions: {
        outputDir: './'
    },
    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 50000,
        expectationResultHandler: function(passed, assertion) {  }
    },
    before: function () {
        require('ts-node/register');
        require('ts-node').register({
            project: 'e2e'
        });
    },
    onPrepare: function() { },
    onComplete: function() { },
}

Can anybody point out, what have i missed or wrongly configured? Currently two instances of google Chrome launches and the test cases run on them, while I want the test cases to run in chrome and firefox respectively