Material UI styled components are thrown Typescript error JSX element type does not have any construct or call signatures.ts(2604)

I'm using the @mui/material/styles to create a styled component. The component is defined as:

const CloseButton = styled(Button)(() => ({
    backgroundColor: '#f5f5f5',
    height: '100%',
    width: '50px',
    minWidth: '50px',
    borderRadius: 0,
    borderWidth: 0,
    borderTopRightRadius: 'inherit',
    borderBottomRightRadius: 'inherit',
}));

and is used as follows:

<CloseButton onClick={dismissFunc}> Close</CloseButton>

Where the button is being used is getting the following error:

JSX element type 'CloseButton' does not have any construct or call signatures.ts(2604)

What is the correct way to use a styled component with Typescript?

Answer

I found a solution at the following site: https://blog.skorp.io/jsx-element-type-does-not-have-any-construct-or-call-signaturests2604

The solution is to type the styled component as a React.component.

Now the styled component looks like this:

const CloseButton:React.component = styled(Button)(() => ({
    backgroundColor: '#f5f5f5',
    height: '100%',
    width: '50px',
    minWidth: '50px',
    borderRadius: 0,
    borderWidth: 0,
    borderTopRightRadius: 'inherit',
    borderBottomRightRadius: 'inherit',
}));