react 引用了相同組件如何使state獨立

如代碼所示

    class Listbox extends React.Component {
        constructor(props) {
            super(props);
            this.state={
                isActive: true
            }
        }
        removeClass = e => {
            this.setState({isActive: false})
        }
        render() {
            return (
                <div className="ListBox" style={{height: `${this.props.ListHeight}`}}>
                    
                    <div className="titleArea">
                        <span className="title">
                            {this.props.title}
                        </span>
                        <span className="subTitle">{this.props.subTitle}</span>
                    </div>
                    {this.props.tabs ? (
                        <div><Button className={{isActive: this.state.isActive}}>近7日</Button><Button onClick={this.removeClass}>近30日</Button></div>
                    ):""}
                    <div className="content" style={{height: `${this.props.contentHeight}`}}>
                        {this.props.children}
                    </div>
                </div>
            )
        }
    }

兩個地方引用了Listbox 組件 如何使isActive獨立互不影響？