reactjs - 组件的多次使用导致 React 未定义错误

我正在我的应用中渲染一个 Card 组件。当我只有一张卡时，一切正常，但一旦有多张卡，我就会得到 ReferenceError: React is not defined

<div className="App">
  <Card />
  <Card />
</div>

我的卡片组件代码如下（样式使用 Emotion 实现）：

/** @jsx jsx */

import React, { useRef } from "react";
import { css, jsx } from "@emotion/core";

import useComponentSize from "@rehooks/component-size";

function Card(props: any) {
  const ref = useRef(null);

  let size = useComponentSize(ref);
  let { width } = size;

  const style = css({
    display: "flex",
    flexDirection: width > 600 ? "row" : "column",
    "& div": {
      marginTop: 10,
      flex: 1
    },
    "& img": {
      objectFit: "cover",
      flex: 1
    },
    "& h2": {
      paddingLeft: 10,
      paddingRight: 10
    },
    "& p": {
      paddingLeft: 10,
      paddingRight: 10
    }
  });

  return (
    <div css={style} ref={ref}>
      <img src="ribena.webp" alt="" />
      <div>
        <h2>placeholder</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
          molestiae, vitae esse et dignissimos consequuntur provident eligendi
          labore beatae laboriosam.
        </p>
      </div>
    </div>
  );
}

export default Card;

我已经通过 NPM 安装了所有必需的依赖项，并在卡片组件和应用组件中都导入了 React。我不明白为什么当有一个卡片时它是定义的，而当有两个卡片时却不是。

我在项目中使用 TypeScript，如果这会有影响的话，TypeScript 的严格模式已设置为 false。

我唯一使用的非稳定版本是 @ionic/react。也许那是导致问题的原因？或者可能是 Typescript，因为根据我（有限的）经验，Typescript 经常引起奇怪的问题

我已经在 codesandbox 上重现了这个错误，这个错误是间歇性的，我在这个 sandbox 中看到同样的错误被重现过……有时会出错，有时不会 🤷♂️

我正在使用 rehooks/component-size 包