Opening Specific Components Through Onclick Event - React.js

I have some data coming from Firebase and I am printing them into the app as lists. However, at first I just want to print a header for each list and when clicking on these headers

Solution 1:

The child Orcamentos components need to control their own open state. The way you have structured it they are both taking the same state as a prop from the parent ClientesControls, and clicking either child component refers to the same handler which updates that state, so of course they are both being activated.

const orcamentos = props => {

const [open, setOpen] = React.useState(false);

let nome = Object.keys(props.orcamentosInfo)
                .map(k => props.orcamentosInfo[k].nomeCliente);

return (

    <div onClick={() => setOpen(!open)}>
        <h4>{nome[0]}</h4>
        {
            Object.keys(props.orcamentosInfo)
                .map(k => <p key={Math.random()} >{ open ? props.orcamentosInfo[k].data : null}</p>)
        }

    </div>

  );
}