Emotion.js with create-react-app: ReferenceError: jsx is not defined - reactjs

Question

I am trying to use emotion.js with create-react-app and TypeScript.
Following the documentation I added #emotion/core, used import {jsx, css} from '#emotion/core'; and added /** #jsx jsx */ at the top of my file.
But when I am running the app, the following error gets thrown:
ReferenceError: jsx is not defined
This is my example component:
/** #jsx jsx */
import {jsx, css} from '#emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";
export const Header: React.FunctionComponent<{}> = () => (
<div css={{
backgroundColor: 'hotpink',
'&:hover': {
color: 'lightgreen'
}
}}>
<NavigationBar/>
Test
</div>
);
The line, the error gets thrown at is the definition of the function: export const Header: React.FunctionComponent<{}> = () => (
Any help how to get this to work (other than ejecting create-react-app scripts) would be much appreciated.

Answer 1

UPDATE: Emotion should work right out of the box now according to this comment on github.
The solution is to put a jsx; statement somewhere in the file, like so:
/** #jsx jsx */
import {jsx, css} from '#emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";
jsx;
export const Header: React.FunctionComponent<{}> = () => (
<div css={{
backgroundColor: 'hotpink',
'&:hover': {
color: 'lightgreen'
}
}}>
<NavigationBar/>
Test
</div>
);

Answer 2

To add to Johannes Klauß's answer, you don't need to reference jsx;
You just need the pragma statement (top-line and import):
/** #jsx jsx */
import { jsx } from "theme-ui"
Example:
/** #jsx jsx */
import {jsx, css} from '#emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";
export const Header: React.FunctionComponent<{}> = () => (
<div css={{
backgroundColor: 'hotpink',
'&:hover': {
color: 'lightgreen'
}
}}>
<NavigationBar/>
Test
</div>
);
you may need to add:
/** #jsxRuntime classic */
as well if using theme-ui and next.JS