passing state variables in react from child of one parent to another parent

I'm extremely new to react. i'm trying to build a single page e-commerce cart page.
live link : https://reliable-selkie-ebd5a9.netlify.app/
git repo : https://github.com/mtaz337/E-commer-SPA-React
where I fetched some fake data from an api. using react and css I rendered those products on the page. The functionality is whenever user press on the add to Cart button + - sign will pop up and products will be added to cart and according to product price and delivery charge a total will be shown. you can view the calculation when clicking on the cart button on header. the cart section user can delete the products from cart by clicking the cross icon. and there should be an clear cart button on clicking which will empty the cart and show no items.

however, I could not add the product number badge on the Cart button in the header and couldn't apply clear cart button functionality. and the remove items from cart functionality seems buggy. whenever i click remove icon from cart products removed should show 'add to cart' but the button disappears.

it's a really small project. please if you have time go through the git repo and will appreciate a lot.

the component breakdown is like this

</header>
</body>
  </product>
  </cart>
  </cartProduct>

Here is the Product.js

import React, { useState } from 'react';
import './Product.css'


const Product = (props) => {
    const {title, price, description, category,image, rating,count}= props.product;
    const [addToCartClincked, setAddToCartClincked] = useState(false);
    const [counts, setcounts] = useState(0);
 
    //increase countser
    const increase = () => {
      setcounts(counts => counts + 1);
    };
    //decrease countser
    const decrease = () => {
      setcounts(counts => counts - 1);
    };

    return (
        <div className="product">
            <img src={image} alt="" />
            <h3>{title.substring(0, 50)}</h3>
            <h5 className='price'>৳{price}</h5>
            
            <div className='cardFooter'>
              {
                !addToCartClincked || counts===-1|| props.product.count===0? 
                  <button className='artBtn' id="addToCart" onClick={() =>{
                    setAddToCartClincked(true);
                    setcounts(0);
                  } 
                   
                  }><strong>Add to Cart</strong></button>

                :
                <>
                  <div className='counter' id="counter">
                    <button onClick ={()=>{
                      increase();
                      props.handleInviteProduct(props.product);
                    }}>+</button>
                    <p>{counts}</p>
                    <button onClick={()=>{
                      decrease();
                      props.handleRemoveProduct(props.product)
                    }}>-</button>
                  </div>
                </>
              }
            </div>
        </div>
    );
};

export default Product;

how can I show the item count on the Cart button badge dynamically instead of '*'

here is the header.js

import React, { useState } from 'react';
import './Header.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
import { faShoppingCart} from '@fortawesome/free-solid-svg-icons';

const Header = () => {
  const cart = <FontAwesomeIcon icon={faShoppingCart}/>
  const cartShow = ()=>{
    document.getElementById("cart").style.display="block";
    document.getElementById("product-section").style.opacity= "0.5";
  }
    return (
        <div className="header">
            <img src='https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/06/shopping-online.jpg'>
            </img>
            <span class="button_badge">*</span>
            <button onClick={cartShow}>{cart}</button>
        </div>
    );
};

export default Header;

Here is Cart.js

import React, { useState } from 'react';
import './Cart.css'
import CartProduct from '../CartProduct/CartProduct';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
import { faClose} from '@fortawesome/free-solid-svg-icons';
const Cart = (props) => {

    const {cart} = props;
   
    const handleRemoveItem=(item)=>{
        props.removeItem(item)
    }
    let total=0;
    for(const product of cart){
        total= total+product.cost;
    }
 
    const close = <FontAwesomeIcon icon={faClose}/>
    const cartClose=()=>{
        document.getElementById("cart").style.display="none"
        document.getElementById("product-section").style.opacity= "1";
    }
    
    const openModal= () =>{
     document.getElementById('myModal').style.display = 'block';

    }

    const closeModal= () =>{
        document.getElementById('myModal').style.display = 'none';
   
       }

    return (
        <div className="cart" id="cart">
            <div id="cartHead">
                <h1><b>CART</b></h1>
                <button id="crossCart" onClick={cartClose}>{close}</button>
            </div>
           
            {
                total.toFixed(2)!== "0.00" ?
                <>
                     <h3><b>Your Items</b></h3>
                    <hr></hr>
                    {
                    cart.map(product => <CartProduct  key={product.id} product={product} handleRemoveItem={handleRemoveItem}></CartProduct>) 
                    }
                    <hr></hr>
                    <h4>Sub-total = ৳{total.toFixed(2)}</h4> 
                    <h4>Delivery Charge = ৳100 </h4> 
                    <hr></hr>
                    <h4><b>Grand-total = ৳{parseFloat(total.toFixed(2))+100}</b></h4> 
                    <button id="checkOutBtn" onClick={openModal}>Proceed To Check Out</button>

                    <div id="myModal" className="modal">
                        <div className="modal-content">
                                <span className="close" onClick={closeModal}>&times;</span>
                                <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Eo_circle_green_checkmark.svg/2048px-Eo_circle_green_checkmark.svg.png'></img>
                                <h2>Dear user, your order has been placed.</h2>
                       </div>

                    </div>
                </>
                :
                <h2>No Items</h2> 
            }
        </div>
    );
};

export default Cart;