Why does React.createRef() for material-ui Button element in TypeScript not work correctly?

Question

Using React v16.13.1 I have the following component class with a Material-UI Button component and a RefObject to access the button element.

class Search extends React.Component<any, any>{

  constructor(props: any) {
    super(props)

    this.streetViewRef = React.createRef();
  }

  private streetViewRef: React.RefObject<Button>;
}

for the following Button element

<Button ref={this.streetViewRef} size="sm" variant="primary" block >Street View</Button>

However, the following TypeScript error is displayed.

What needs to be changed to correct this error?

Answer 1

Take a look here https://www.selbekk.io/blog/2020/05/forwarding-refs-in-typescript/

The correct way to type a forwardRef component is:

type Props = {};
const Button = React.forwardRef<HTMLButtonElement, Props>(
  (props, ref) => <button ref={ref} {...props} />
);