only selected item have change the background color of list, please help to how to change the background color of specific element in this list items

 <div style={{ padding: '0px 28px', marginBottom: '20px' }}>
               <div className='date__container'>
                  {arrdays.map((dayy, id) => (
                     <TimeContainer
                        day={dayy.day}
                        date={dayy.date}
                       
                     />
                  ))}
               </div>
            </div>

TimeContainer component

const TimeContainer = (props) => {
      const month = ['January','February','March','April','May','June','July','August','September','October','November','December'];

      
      return (
         <div
            className='dateBox'
           
            style={{
               backgroundColor: `${props.isSelected===props.key ? 'purple' : 'white'}`,
            }}
         >
            <p style={{ fontSize: '16px', color: '#888', fontWeight: 'bold' }}>
               {props.day}
            </p>
            <p style={{ color: 'black', fontSize: '17px', fontWeight: 'bold' }}>
               {props.date}
            </p>
         </div>
      );
   };