I have list of items and I am changing the background color when I clicked on that item...
I need to change only the current Selected Item only , Previous selected Item should deselect... Now here, all items are getting changed when I clicked on each item... How can I solve this?? Can anyone help me in this ??

Here is my code

```
const Time = () => {

  const [selectedItem, setSelectedItem] = React.useState();
  const handleSelect = (event,selectedItem) => {
    setSelectedItem(selectedItem);
    event.target.style.backgroundColor = 'black';
    event.target.style.color = 'white';
};

  const dataTime = useMemo(() => TimeData, []);
  const chunks = useMemo(() => {
    const _chunks = [];
    const tmp = [...dataTime];
    while (tmp.length) {
      _chunks.push(tmp.splice(0, 3));
    }
    //console.log(_chunks);
    return _chunks;
  }, [dataTime]);

  return (
    <div className="Main-Section">
      <div className="First-Section">Time</div>
      <div className="Second-Section">
        <div className="date_title">Wednesday , June 13</div>
        <div className="time_Slots">
          {chunks.map((timeslot) => {
            return (
              <div key={timeslot} className="inline">
                {timeslot.map((time) => {
                  return <p className='timeslots target' key={time} 
                  onClick={(event) => handleSelect(event,time)}>{time}</p>;
                })}
              </div>
            );
          })}
        </div>
        <div>{selectedItem}</div>
        <div className='new_Date'>PICK A NEW DATE</div>
      </div>
    </div>
  );
};

```