React hooksでエラーが出てしまう

Question

やろうとしてること

webpackを使ってReact アプリケーションを動かしたい.

発生している問題

react-router-domを使ったルーティング処理中の中でReact.Lazyを使うと下記のエラーが発生する.

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:

import React from "react";
import { Route, RouteProps, Switch, BrowserRouter } from "react-router-dom";

type RouteDef = RouteProps & { key: string };

const routeDefs: RouteDef[] = [
  {
    key: "home",
    path: "*",
    component: React.lazy(() => import("./page/Home")),
  },
];

const withRouteComponent = (Comp: RouteProps["component"], props: any) => {
  if (!Comp) {
    throw new Error("Route Component not Defined");
  }
  const RouteComponent = () => <Comp {...props} />;
  return RouteComponent;
};

const routeComponents = routeDefs.reduce<{
  [key: string]: RouteDef["component"];
}>((pre, routeDef) => {
  pre[routeDef.key] = withRouteComponent(routeDef.component, routeDef);
  return pre;
}, {});

export const AppRouter = () => {
  return (
    <BrowserRouter>
      <React.Suspense fallback="...loading">
        <Switch>
          {routeDefs.map((routeDef) => (
            <Route
              exact
              key={routeDef.key}
              path={routeDef.path}
              component={routeComponents[routeDef.key]}
            />
          ))}
        </Switch>
      </React.Suspense>
    </BrowserRouter>
  );
};

自分の見解

create-react-appを使った場合ではうまく行っていたのでおそらくwebpack中の何かが原因だと考える.
今回,HtmlWebpackPluginを使っているのでこいつが原因かなと思っている.

助けて欲しいこと

なぜこのようなことが発生していて,その解決策は何か？