jsx-control-statements | Neater If and For for React JSX | Frontend Framework library

When I use @babel/plugin-transform-typescript to compile typescript, the warning happens

This problem is likely caused by another plugin injecting "_class" without registering it in the scope tracker. If you are the author of that plugin, please use "scope.registerDeclaration(declarationPath)". The exported identifier "_class" is not declared in Babel's scope tracker as a JavaScript value binding, and "@babel/plugin-transform-typescript" never encountered it as a TypeScript type declaration. It will be treated as a JavaScript value.

I cannot find out why.

Here is my babel.config.js

I'm trying to integrate the monaco editor into an existing react application. I followed the installation steps from (react-monaco-editor), but I don't get any syntax highlighting or autocomplete for typescript, consistent with the FAQ as if I hadn't set up the monaco-editor-webpack-plugin.

I have setup the plugin though. I can see that the monaco-editor-webpack-plugin is dropping files along side my app.js, so I presume it is working:

It seems my issue is that react-monaco-editor is trying to pull these files from the wrong location. If I load my page and open my network tab, I can see the following:

There are two problems:

1 - the paths are full paths on my system but should be relative paths - e.g.

As I got from React documentation using hooks do not require big code refactoring and can be easily included in the existing code. I want to make reusable dropdowns, being called from react component render method. Here is my code:

We have been using React and jsx for a while, and for conditionals we have been using jsx-control-statements which I really like:

Im using jsx-control-statements in react app to add basic control statements. I've installed the same using npm and updated the .babelrc file as below