Warning: Styled(button): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

This error is printing in the logs:

Warning: Styled(button): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

defaultProps is being deprecated by React: https://github.com/facebook/react/pull/25699

I believe this is the culprit, https://github.com/react-hook-form/devtools/blob/34e2e2e1deb3aa92fc8b9e03e99d6c911809d629/src/styled.tsx#L26

I believe the recommended way to set default props now is to use JS destructuring and default values, something like this may work for the Button component:

interface ButtonBaseProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
}

const ButtonBase = ({ type = 'button', ...props }: ButtonBaseProps) => {
  return <ButtonBase type={type} {...props} />;
};

const Button = styled(ButtonBase)<{ hideBackground?: boolean }>`
  appearance: none;
  margin: 0;
  border: 0;
  color: white;
  padding: 5px !important;
  border-radius: 0 !important;
  background: ${(props: { hideBackground?: boolean }) =>
    props.hideBackground ? `` : `${colors.blue} !important`};
  transition: 0.2s all;

  &:hover {
    background: ${colors.lightBlue};
  }
`;

react-hook-form / devtools

Warning: Styled(button): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. #201