Проблема Typescript MaterialUi и Styled Components

Question

Я довольно новичок в машинописи, но я хочу добиться того, чтобы стилизовать кнопку пользовательского интерфейса материала самостоятельно и добавить к ней несколько пользовательских реквизитов.

Компонент My Button:

import React from 'react';
import { ButtonProps as MUIButtonProps } from '@material-ui/core';
import styled from 'styled-components';
import { Button as MuiButton } from '@material-ui/core';
import Link from 'next/link';


interface ButtonProps extends MUIButtonProps {
  children: React.ReactNode,
  isCircled?: boolean,
  ref: any,
}

const DefaultButton = styled(React.forwardRef((props: ButtonProps, ref) => {
  const {
    isCircled,
    ...other
  } = props;

  return (
    <MuiButton ref={ref} {...other} />
  )
}))`
  height: 48px;
  border-radius: ${(props: any) => props.isCircled ? '25px' : '10px'};
`;


const Button = (props: ButtonProps) => {
  const {
    children,
    isCircled,
    href,
    ...rest
  } = props;

  return (
    <>
      {href ? (
        <Link href={href}>
          <DefaultButton isCircled={isCircled} {...rest}>{children}</DefaultButton>
        </Link>
      ) : (
        <DefaultButton isCircled={isCircled} {...rest}>{children}</DefaultButton>
      )}
    </>
  )
}

Button.defaultProps  = {
  isCircled: true,
  color: "secondary",
  variant: "contained",
  ref: "",
};


export default Button;

Это работает сейчас, но мне интересно, как правильно расширить реквизиты MUIButtonProps - добавьте необязательный isCircled prop и избегайте использования ref: any?

Теперь, когда я удаляю, например, ref из defaultProps, я получаю ошибка Property 'ref' is missing in type ( children: string ...