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

I'm using an isActive property in React. It's not a native property but I would like to use it to make sense in my code logic. However, React is displaying this warning:

StyledComponent.ts:159 styled-components: it looks like an unknown prop "isActive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props($ prefix for automatic filtering.)

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

const { StrictMode } = React;
const { createRoot } = ReactDOM;
const { ThemeProvider } = styled;

const Container = styled.button`
    background: none;
    color: ${({ theme, isActive }) => (isActive ? theme.COLORS.ORANGE : theme.COLORS.GRAY_100)};
  
    border: none;
    font-size: 16px;
`;

function ButtonText ({ title, isActive = false, ...rest }) {
    return (
        <Container type="button" {...rest} isActive={ isActive }>
            {title}
        </Container>
    );
}

const theme = {
    COLORS: {
        ORANGE: "orange",
        GRAY_100: "grey",
    },
};

function App() {
    return (
        <ThemeProvider theme={theme}>
            <ButtonText title="Title" />
        </ThemeProvider>
    )
}

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

I tried using the $ prefix, but it didn't work. I tried using props in the compoment, it didn't work either.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/exsVIwp