multiple components break react

[o-t-w]

Not entirely sure this is the fault of this dependency, but...
I used this to make a card component responsive. When I import it once, everything is OK. When I import it more than once, I get the error message ReferenceError: React is not defined

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

This is my Card component:

/** @jsx jsx */

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

import useResizeObserver from "react-resize-observer-hook";

function Card(props) {
  const [dimensions, setDimensions] = useState({ width: 100, height: 50 });
  const parentRef = useRef(null);

  useResizeObserver(parentRef, entry =>
    setDimensions({
      width: entry.width,
      height: entry.height
    })
  );

  const style = css({
    display: "flex",
    flexDirection: dimensions.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={parentRef}>
      <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;