I'm currently getting this error and I'm not quite sure how to avoid it as everything I've tried doesn't really work out.

I thought this would fix it but it didn't:

${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}

The error:

Warning: React does not recognize the `maxWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `maxwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

My first component looks like this:

export const DialogWrapper = styled(DialogContent)<CardWrapperProps>`
  ${({ outline }) => outline && `border: 1px solid ${COLORS.gray300};`}
  border-radius: ${SCALE.size4};
  width: ${({ width }) => width};
  ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}
  ${({ height }) => (height ? `max-height: ${height};` : '')}
  background: ${COLORS.white};
`

And my second one like this:

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ outline, elevation, width = 'inherit', maxWidth='650px', isModal, ...props }, ref) => {
    const CardWrapper = isModal ? DialogWrapper : Wrapper 
    return (
      <CardWrapper
        data-testid={`card`}
        data-title={props.title}
        aria-label={'card'}
        ref={ref}
        {...{ outline, elevation, width, maxWidth, ...props }}
      >
        <CardContent {...{ elevation, isModal, ...props }} />
      </CardWrapper>
    )
  }
)