@emotion/react Syntax highlighting doesn't work

Question

I work on react project and use emotion library for styling inside .js file. Syntax highlighting in @emotion/styled works with no issue, but css function from @emotion/react causes some sort of syntax highlighting bug. Can someone tell me how to solve the issue?

import React from "react";
import { Link } from "react-router-dom";
import { css } from "@emotion/react";

import Layout from "../components/Layout";
import Heading from "../components/atoms/Heading";
import Paragraph from "../components/atoms/Paragraph";
import Button from "../components/atoms/Button";

export default function Home() {
 return (
   <Layout
     pageTitle="Home"
     css={css`
       display: flex;
     `}
   >
     <Heading>HaxBall Clone</Heading>
     <Paragraph>
       HaxBall clone made with react and pixi.js.
       <br />
       Original game:{" "}
       <a href="https://haxball.com" target="_blank" rel="noreferrer">
         HaxBall.com
       </a>
     </Paragraph>
     <Button as={Link} to="/enter-user">
       Play!
     </Button>
   </Layout>
 );
}