reaccionar | ForwardedRef usando React.Component

Estoy creando un componente personalizado en React y necesito exportarlo usando forwardedRef. Pero cuando lo intento, aparece este error:

error

my code:

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{
 ref?: React.RefObject<HTMLButtonElement>;
}
class Button extends React.Component<ButtonProps> {
 render() {
 const {
 ref,
 children,
...otherProps
 } = this.props;
 return (
 <button 
 {...otherProps} 
 ref={ref}
 >
 {children}
 </button>
 )
 }
}
const ButtonForwarded = React.forwardRef<ButtonProps>((props, ref) => 
<Button {...props} ref={ref} /> );
ButtonForwarded.displayName = 'Button';
export default ButtonForwarded;

Solución del problema

Cree el componente ButtonForwarded así:

const ButtonForwarded = React.forwardRef((props: ButtonProps, ref: LegacyRef<Button>) => <Button {...props} ref={ref} /> );