React does not recognize the `isActive` prop on a DOM element - styled-components

Question

I have the following svg component where I am passing props.

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

I then have a styled-component that looks like this.

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

I am seeing the following react error.

Warning: React does not recognize the isActive prop on a DOM element.

Answer 1

const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`

Is the much less hacky solution that also prevents the property from being unnecessarily rendered to the DOM