dodawanie klasy w react po kliknięciu

chciałbym by po kliknięciu na div w Header zmieniła się jego klasa, jednak mi nie wychodzi, oto mój kod
app.js

import Header from './components/Header';
import Main from './components/Main';
import Basket from './components/Basket';
import data from './data';
import { useState } from 'react';

function App() {
  const { products } = data;
  const [cartItems, setCartItems] = useState([]);
  // const onClick = () => {
  //   return "cart-btn cart-brtn2"
  // }
const [isActive, setActive] = useState(false);

  const onClick = () => {
    setActive(!isActive);
  };
  const onAdd = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    if(exist) {
setCartItems(cartItems.map((x) => x.id === product.id ? {...exist, qty: exist.qty + 1 } : x)
      );
    } else {
setCartItems([...cartItems, {...product, qty: 1}]);
    }
  };
  return (
    <div className="App">
      <header>
        {/* <button>asdfasd {cartItems.length}</button> */}
      </header>
   **   <Header onClick={onClick}></Header>**
      <div>
      <Main onAdd={onAdd} products = {products}></Main>
      <Basket onAdd={onAdd} cartItems={cartItems}></Basket>
      </div>
     
    </div>
  );
}

export default App;

header.js

import React from 'react';

export default function Header(props) {
    const {onClick, isActive} = props;
  return (
   <div>
        <nav className='navbar'>
        <div className="navbar-center">
            <span>Mobile phones</span>
            <div onClick={onClick} className={isActive ? 'cart-btn cart-brtn2': null} >
                <span className="nav-icon">
                    <i className="fas fa-cart-plus"></i>
                </span>
                <div className="cart-items">0</div>
            </div>
        </div>
    </nav>
    <header className='hero'>
    <div className="banner">
        <h1 className="banner-title">collection of mobile phones</h1>
        <button className="banner-btn">shop now</button>
    </div>
    </header>
   </div>
  )
}

Nie przekazujesz propsa isActive do komponentu Header .

a jak mógłbym zrobić tak by przed kliknięciem była już tam jedna z klas?

jeśli o to ci chodzi :

className={`cart-btn ${isActive ? "cart-brtn2" : ""}`}