Problems with converting the notepad example of proton-native from js to tsx

I try to convert the Notepad example from the proton-native repository into Typescript. I ran into some issues I could not fix.

Code:TSConfig:

{"compilerOptions": {"strict": true,"target": "es6","module": "ES2015"}}

package.json:

{"name": "notepad","version": "1.0.0","type": "module","description": "a notepad app built using proton-native","main": "index.tsx","scripts": {"start": "babel-node index.tsx"},"dependencies": {"@types/jest": "^26.0.22","@types/node": "^14.14.37","@types/react": "^17.0.3","@types/react-dom": "^17.0.3","proton-native": "^2.0.0","typescript": "^4.2.4"},"devDependencies": {"@babel/cli": "^7.4.4","@babel/core": "^7.4.4","@babel/node": "^7.2.2","@babel/plugin-proposal-class-properties": "^7.4.4","@babel/preset-env": "^7.4.4","@babel/preset-react": "^7.0.0","@babel/preset-stage-0": "^7.0.0"},"author": "","license": "ISC"}

index.tsx

import React, { Component } from 'react';import fs from 'fs';import { App, AppRegistry, Window, TextInput, View } from 'proton-native';class Notepad extends Component {  state = { text: '' };  shouldComponentUpdate(nextProps, nextState) {    if (typeof nextState.text === 'string') return false;    // nextState is set from input    else return true; // nextState is set from file  }  render() {    return (<App><Window><View style={{ flex: 1 }}><TextInput              onChangeText={text => this.setState({ text })}              value={this.state.text}              style={{ flex: 1 }}              multiline            /></View></Window></App>    );  }}AppRegistry.registerComponent('notepad', <Notepad />);

I did not change anything in the other files, except of changing index.js to index.tsx. Related stackoverflow post. I could not figure out how to change the index.js (now index.tsx code) into the ES2015 format. (as suggested in 2)

Error:

babel-node index.tsxinternal/process/esm_loader.js:74internalBinding('errors').triggerUncaughtException(^TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tsx" for C:\xxx\Notepad\index.tsxat Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)at Loader.getFormat (internal/modules/esm/loader.js:102:42)at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)at processTicksAndRejections (internal/process/task_queues.js:93:5)at async Loader.import (internal/modules/esm/loader.js:165:17)at async Object.loadESM (internal/process/esm_loader.js:68:5) {code: 'ERR_UNKNOWN_FILE_EXTENSION'}npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! notepad@1.0.0 start: babel-node index.tsxnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the notepad@1.0.0 start script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR! C:\xxx\2021-04-14T08_50_04_846Z-debug.log