How to get webriver io typescript working wdio wizard

Question

I'm Putting together a WebdriverIO project with TypeScript and Cucumber. I ran the wizard which seems straight forward enough. I selected Cucumber, TypeScript and page object model.

This generates a test/wdio.conf.ts and test/tsconfig.json file as well as a boilerplate Feature file

However when I run the test with the command wdio run test/wdio.conf.ts

I get the following error:

export const config = {
^^^^^^

SyntaxError: Unexpected token 'export'

What is the problem?

test/wdio.conf.ts

export const config = {
    // ...
    autoCompileOpts: {
        autoCompile: true,
        // see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
        // for all available options
        tsNodeOpts: {
            transpileOnly: true,
            project: 'tsconfig.json'
        },
        // tsconfig-paths is only used if "tsConfigPathsOpts" are provided, if you
        // do please make sure "tsconfig-paths" is installed as dependency
        tsConfigPathsOpts: {
            baseUrl: './'
        }
    }
}

test/tsconfig.json

{
    "compilerOptions": {
        "types": [
            "node",
            "webdriverio/async",
            "@wdio/cucumber-framework",
            "expect-webdriverio"
        ],
        "target": "ES5"
    }
}

package.json

{
    "name": "e2e-wdio",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "wdio": "wdio run test/wdio.conf.ts"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@wdio/cli": "^7.16.13",
        "@wdio/cucumber-framework": "^7.16.13",
        "@wdio/local-runner": "^7.16.13",
        "@wdio/spec-reporter": "^7.16.13",
        "chromedriver": "^97.0.0",
        "ts-node": "^10.4.0",
        "typescript": "^4.5.5",
        "wdio-chromedriver-service": "^7.2.6",
        "webdriverio": "^7.16.13"
    }
}