Reactjs – Buttons not working inside a react component

I’m new in the programming area, and I’m trying to build a react web app that has a cart button when it is clicked it shows the products in the cart

My App.js is this

import './App.css';
import HomePage from "./components/HomePage";
import Item from "./components/Item";
import AboutUs from "./components/AboutUs";
import {useState} from "react";
import Cart from "./components/Cart";

const products = []
const savedItems = []

function App() {


    const [state, setState] = useState(false);

    const changeState = () =>{
        if (state){
            setState(false);
        } else {
            setState(true)
        }
    }


    const toFalse = () => {
      setState(false);
    }



  return (
    <div className="App">
        <HomePage onChangeState={changeState}/>
        {state? <Cart closeCart={toFalse} onCart={savedItems}/> : ""}
        <h2>Produtos</h2>
        <div className="card-items">
            {products.map(item => (
                <Item key={item.id} imgSrc={item.image} title={item.title} price={item.price.toFixed(2)}/>
            ))}
        </div>
        <AboutUs/>


    </div>
  );
}

export default App;

in the HomePage component it has button to change the state and hide/show a cart, it is working correctly when i click in the cart icon

         <div className="user-cart">
               <FontAwesomeIcon className="user" icon={faUser} size="2x"/>
               <FontAwesomeIcon className="cart" onClick={changeState} icon={faCartShopping} size="2x"/>
         </div>

enter image description here

(ignore the portuguese there)

the problem is that sems like that the buttons in the card component did not work

import React from "react";
import "./Cart.css"
import ItemOnCart from "./ItemOnCart";
import Button from "./Button";

export const Cart = (props) => {

    if(props.onCart.length === 0){
        return (
            <div className="cart-panel">
                <h1>Sem item no carrinho</h1>
                <Button onClick={props.closeCart}>Fechar</Button>
            </div>
        )
    } else{
        return(
            <div className="cart-panel">
                <h1>No Seu Carrinho</h1>
                <ItemOnCart imgItem={props.onCart[0].image} title={props.onCart[0].title} price={props.onCart[0].price}/>
                <ItemOnCart imgItem={props.onCart[1].image} title={props.onCart[1].title} price={props.onCart[1].price}/>
                <Button onClick={props.closeCart}>Fechar</Button>
            </div>

        )
    }
}

export default Cart

when i click in the button "fechar" which is to close it should call the parent function and change de state to false, but it is not doing this, i tried to make the button just show a console.log msg to confirm that it is working but also not working

does it has a better way to do this? I’m still learning react so maybe it has a better option to show and hide the cart area. thx