Как выполнить строку кода в js что бы строка видела импорты?

У меня есть модуль , который трансформирует реакт код и должен его выполнять.

Всё хорошо работает, но когда строка выполняется у меня появляется ошибка, которая говорит, что у меня нет подключенного модуля react, но в модуле он есть и даже в такой записи видит ${React.Component} react

Фрагмент модуля:

 import React from 'react';
 import ReactDOM from 'react-dom';

 export default ()=>{
 let obj =  babel.transform(`
 class Hello extends ${React.Component} {
     render() {
         return <div>Hello {this.props.toWhat}</div>;
     }
 }

 `,{presets: [babel['availablePresets']['react']], plugins: 
   [babel['availablePlugins']['transform-react-jsx']]})


   let out = babel.transform(`
        ${obj.code}
        <Hello toWhat="World" />
 `,{presets: [babel['availablePresets']['react']], plugins: 
   [babel['availablePlugins']['transform-react-jsx']]})

   ReactDOM.render(eval(out.code), mountPoint )

Это ошибка при выполнении.

VM2990:17 Uncaught (in promise) ReferenceError: React is not defined
    at eval (eval at <anonymous> (app.react.mjs:NaN), <anonymous>:17:1)
    at eval (app.react.mjs:59)
    at new Promise (<anonymous>)
    at Object.react (app.react.mjs:41)
    at modules (react-core.mjs:696)
    at react-core.mjs:683

Это трансформированный код реакта.

class Hello extends function Component(props, context, updater) {
  this.props = props;
  this.context = context; // If a component has string refs, we will assign a different object later.

  this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
  // renderer.

  this.updater = updater || ReactNoopUpdateQueue;
} {
  render() {
    return /*#__PURE__*/React.createElement("div", null, "Hello ", this.props.toWhat);
  }

}

/*#__PURE__*/
React.createElement(Hello, {
  toWhat: "World"
 });
}