Show a Reactjs component within a .map function by assigning it an id

When I click on a button within a .map function, I just want it to be displayed the component that I clicked on, i do not to want repeated in all the others. In this moment the behavior of the component is as follows.

When i click the three dots, show the next component:

In this order of ideas, I want this to not happen, I just want the component to be shown on the card I clicked on

In the code I have the following:

    list.map(({ image, titleHeader, price, description, requirements, state, uuid_property }, i) =>
<div className={`card  ${state == 1 ? '' : 'card-disabled '}`} key={`car-${i}`}>

    ... // <-- more lines of code
                <div style={{ display: 'contents', position: 'relative' }}>
                    <img src={mas} alt="" className="icon-top-rigth-card filter-white" onClick={handleBurgerClick} />
                    <ul className="nav-links" style={{ borderRadius: '5px', boxShadow: '1px 1px 3px black', color: '#000', position: 'absolute', background: 'white', listStyle: 'none', right: '16rem' }}>
                        {navOpened
                            ?
                            <div style={{ padding: '1rem 3rem' }}>
                                <p onClick={() => window.location.href = `${MY_PROPERTY_FORM}/${uuid_property}`}>Editar</p>
                                <p
                                    onClick={
                                        () => {
                                            console.log('uuid_property', uuid_property)
                                        }
                                    }
                                >
                                    {state == 1 ? 'Pausar' : 'Activar'}
                                </p>
                            </div>
                            : ""
                        }
                    </ul>
                </div>
            ... // <-- more lines of code
</div>

** I really appreciate that you can help me**