多次使用组件导致未定义错误

Question

我正在我的App中渲染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导入了card组件和app组件。我不知道为什么只有一张卡片时会定义它，而只有两张卡片时却没有。

我正在项目中使用Typescript，如果有区别，将Typescript严格模式设置为false。

我正在使用的唯一不稳定版本是@ionic/react。也许是引起问题的原因？也许是Typescript，因为Typescript在我（有限的）经历中经常会引起奇怪的问题

我在codesandbox上重新创建了该错误，并且该错误是间歇性的，并且我在此沙箱中看到了相同的错误...有时会出错，有时却不会。

我正在使用rehooks/component-size package