Emotionで'css' does not exist on typeというエラーがでる

はじめに

最近React100本ノックという企画を初めてEmotionを使い始めました
そこで遭遇した問題をまとめます

問題

import { css } from "@emotion/react";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div
        css={css`
          display: flex;

このようなコードを書くとcssで以下のエラーがVSCodeででました

Type '{ children: Element[]; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

解決方法

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

このようにすることでエラーを回避しました

おわりに

根本的な解決まではできていませんが、そこに時間をかけるほどの価値はなさそうだったのでこのような対応をしてみました