React Element type not working with @emotion/react jsxImportSource

Question

According to the docs on emotionJS, it is required to add this to your tsconfig in order to use @emotion/styled

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

But the problem is I get this error when I define a function component

Type 'Element' is not assignable to type 'ReactNode'

The function component

const Header = () => {
  return (
    <StyledBox>
      <AppBar position="static" >
        <Toolbar>
        <Button color="inherit">9 people Online</Button>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>

          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </StyledBox>
  )
}

I change the tsconfig file to this

"jsx": "react-jsx",
"jsxImportSource": "preact"

I was expecting the error to go away, which did work. But the components from @emotion/styled no more work again. And I get this error

 Type 'StyledComponent<BoxOwnProps<Theme> & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, keyof BoxOwnProps<...>> & { ...; }, {}, {}>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'