TS2786: 'Button' cannot be used as a JSX component

When upgrading from react-scripts 4.X to 5.X

Compiled with problems:
×
ERROR in src/App.tsx:51:10
TS2786: 'Button' cannot be used as a JSX component.
 Its return type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element.
 Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'Element'.
 Types of property 'key' are incompatible.
 Type 'Key | null' is not assignable to type 'string | null'.
 Type 'number' is not assignable to type 'string'.
 49 | <div className="App">
 50 | <header className="App-header">
 > 51 | <Button>Click Me</Button>
 | ^^^^^^
 52 | <a
 53 | className="App-link"
 54 | href="https://reactjs.org"

Error TS2786 often comes from a mismatch in @types/react.

Solution

Verify that your @types/react match with your react package version.