How can I style a MUI5 Tooltip with emotion?

I read through https://stackoverflow.com/a/69821680/239879 and tried the styled method. I have:

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';


const ToBeStyledTooltip = ({ className, ...props }: TooltipProps) => (
  <Tooltip { ...props } classes = {{ tooltip: className }} />
);
const StyledTooltip = styled(ToBeStyledTooltip)(({ theme }) => ({
  backgroundColor: '#f5f5f9',
  color: 'rgba(0, 0, 0, 0.87)',
  maxWidth: 220,
  border: '1px solid #dadde9',
}));

But TypeScript gives me an error:

'Tooltip' refers to a value, but is being used as a type here. Did you mean 'typeof Tooltip'?

And when I do a build, I get:

10:11  Error: Parsing error: '>' expected.

Not sure what is different about my setup. Any help would be appreciated.

>Solution :

Make sure you’re on a .tsx or .jsx file and not a .ts, .js file –