React is not conditionally rendering in listed elements correctly. How do you conditionally render listed items?

I know that setting tickets.changeToggle to true (on line 2) will display "hi" in the paragraph html

I know that hitting the button will change tickets.changeToggle to true or false, depending on the current value of each listed item.

My problem is changing tickets.changeToggle does not remove "hi" in the example below. Even when it is false. I would just setState but i want to only change its on the ticket clicked. I guess I could set an array and track the state by index but that seems like the wrong way to go. Any ideas on what to do?

{tickets.map((tickets) => {
            tickets.changeToggle = true;
            <button onClick={() => {tickets.changeToggle = !tickets.changeToggle}>Chg</button>
            <p>{tickets.changeToggle && 'hi'}</p>

You need to wrap the HTML in parenthesis and return, since you're using a lambda with a block:

{tickets.map((tickets) => {
            tickets.changeToggle = true;
            return (
                 <button onClick={() => {tickets.changeToggle = !tickets.changeToggle}>Chg</button>
                 <p>{tickets.changeToggle && 'hi'}</p>
            )
    })
}

Also, mutating data in a map expression is a horrible idea. Don't do that.