React.js :: When displaying a list of items, what is the best way to track the status/state of each item?

My React component displays a list of calendar appointment "attendees" and allows the user to resend or delete the invite. The list is fetched and loaded into an array eventAttendees. My question is how best to keep track of state when the user clicks resend or delete (and if there is an error when attempting one of these actions). I am considering using a immutable Map to track the status so I can display "resending…" or "deleting…", but I’m not sure if this is a best practice or considered an anti-pattern.

For Example:

// Data
const [eventAttendees, setEventAttendees] = useState([]);

// UI updating flags with the eventAttendeeId as the key
const [eventAttendeeStatusMap, setEventAttendeeStatusMap] = useState(Map());

The Map value would contain an object with the following flags

{
  isResending: false,
  isDeleting: false,
  hasError: false,
  errorMsg: null,
}

And then when rendering each item (Invite), I would reference the Map to display things properly.

{eventAttendees.map(eventAttendee =>
    <Invite
        key={eventAttendee.eventAttendeeId}
        {...eventAttendee}
        {...eventAttendeeStatusMap.get(eventAttendee.eventAttendeeId)}
    />
)}

>Solution :

I would deal with this at the Invite component level rather than storing everything in the parent.

The Invite component would have to handle the logic of resending and deleting.