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

[TrejoCode]

Hello, I found the following error implemented the Tabs, my code is as follows:

React Version:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.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.

import React, { useState, useEffect } from "react";
import { Tabs, Tab, Panel } from '@bumaga/tabs';

const PageExample = () => {

    // Active Tab
    const [index, setIndex] = useState(0);

    /**
     * @description Establecer la Tab inicial
    */
    useEffect(() => {
        setIndex(1)
    }, []);

    return(
        <div className="tab-container">
            <Tabs state = {[ index, setIndex ]}>
                <div>
                    <Tab>
                        <div className="align-center">
                            <span className="tab-head cursor-pointer">
                                Tab 1
                            </span>
                        </div>
                    </Tab>
                    <Tab>
                        <div className="align-center">
                            <span className="tab-head cursor-pointer">
                                Tab 2
                            </span>
                        </div>
                    </Tab>
                </div>
                <Panel>
                    <div className="__container">
                        <div className="products wrap">
                            Content 1
                        </div>
                    </div>
                </Panel>
                <Panel>
                    <div className="__container column">
                        Content 2
                    </div>
                </Panel>
            </Tabs>
        </div>
    );
export default PageExample;

Can you help me?

[IvanTsiupa]

Have the same issue ;(

[marcpozzi]

Same issue

[RectoVersoDev]

Same issue..

[dhatGuy]

Experiencing same issue too

[TaekyungAn]

Change isActive to $isActive

[jespadas]

It works if you add $ as decorator. Ex: const Container = styled.div' color: ${({ $isactive }) => ($isactive ? "white" : "gray")}; '; And from container: <Container $isactive={!!user}>

Source