systemjs to load react function component use hooks run error。

Question

I use webpack to bundle a react function component use useState and set output.libraryTarget: system。

import React, { useState } from "react";

const Foo = () => {
  const [str] = useState("workd");
  return <div>hello, {str}</div>;
};

export default [Foo];

In other react project I use systemjs to load the above component lik blow

    <script type="systemjs-importmap">
      {
        "imports": {
          "baseC": "http://localhost:8000/static/js/bundle.js"
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
        <script>
      System.import("baseC");
    </script>

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

window.System.import("baseC").then((res) => {
  const Components = res.default[0];
  console.log("Components", Components);

  ReactDOM.render(
    <React.StrictMode>
      <Components />
    </React.StrictMode>,
    document.getElementById("root")
  );
});

then I get the error react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

and the whole demo in https://github.com/ytudt/react-systemjs

what should I do to solve this problem? thanks.