how fix selected permanently ReactJS

Question

I would like to explain my problem of the day.

the code works correctly , the only problem is when i click on my navbar to select a tab , my activeclassname works fine except that when i click elsewhere on the same page i lose my activeclassname I would like him to be active permanently

Do you have an idea of how to fix this?

class MainHome extends Component {

 constructor(props) {
    super(props);
    this.state = {
    };
    // preserve the initial state in a new object
    this.toggle = this.toggle.bind(this);
    this.cgtChange1= this.cgtChange1.bind(this);
    this.cgtChange2= this.cgtChange2.bind(this);
}

cgtChange1() {
    console.log('bière clicked')
    this.setState({
        cgt : 1
      })
}  
cgtChange2() {
    console.log('cocktails clicked')
    this.setState({
        cgt :2
      })
}

render() {
    let addedItems = this.props.items.length ?
        (
            this.props.items.filter(item => item.ctg === this.state.cgt).map(item => {
                return (
                    <div key={item.id}>            
                {item.title}                       
                    </div>
                )
            })) :
        (
            <div></div>
        )
    return (
        <div>

                                <Header text='Carte'/>
                                    <NavBar
                 onClick1={this.cgtChange1}
                 onClick2={this.cgtChange2}
                />

                {addedItems}    
        </div>
    )
  }
}

NavBar

  export default class FocusOnSelect extends Component {
   render() {
   return (
      <div>
           <button onClick={this.props.onClick1} 
    activeClasseName="selected" className='inactive' > Bières 
   </button>
      </div>
      <div >
           <button onClick={this.props.onClick2} activeClasseName="selected" className='inactive' >  Cocktails </button>
      </div> 
      </div>
   );
  }
  }