Сохранить состояние в списке для поиска в React с крючками

Question

У меня есть компонент, представляющий собой список событий, каждое событие имеет дочерний компонент, который является кнопкой RSVP и содержит логику для его работы.

Список доступен для поиска в режиме реального времени (вводуточняет поиск).

Если я нажимаю кнопку RSVP, кнопка корректно переключается на посещение / не посещение, и база данных обновляется с новым статусом rsvp.

Что неработа
Если я возвращаюсь в поле поиска, я получаю менее конкретные результаты, что происходит, если измененное состояние RSVP теряется и возвращается к состоянию RSVP при первой загрузке компонента.

Что должно произойти
Изменение поискового слова должно сохранить локальное (новое) состояние кнопки RSVP и не возвращаться к состоянию по умолчанию, которое было при загрузке события.

Что работает
Если я обновляю страницу, статус RSVP корректно загружается из БД.

Eventlist.js

{(res.fieldAttendees.some(item => item.targetId === user.kustom_drupalUid))?'iattend':'noattend'}    

<Rsvp
    key={`${index}-${res.nid}`}
    gigId={res.nid}
    iattend={(res.fieldAttendees.some(item => item.targetId === user.kustom_drupalUid))}
/>

Rsvp.js

 export default function rsvp ({ gigId,iattend }) {

  let attend_text = iattend?'Attending':'Attend'; 
  let attend_class = iattend?'check':'';
  const [attend, setAttend] = useState(attend_text);
  const [attendclass, setAttendclass] = useState(attend_class);

 return(
     <div className={"eventAttend " + attendclass}>{attend} {gigId}</div>
 )