get id value from array of objects on mouse click

Question

I have an array of objects that will expand and show an array list of grades on mouse click.

My Question: Is there a way to get a single id value from an onClick event?

For example, in the below array, when I click the button, I want to get id:1 and NOT id: [1,2,3] when I click on Sarah.

I have tried valueOf(), filter(), find(), they all require comparing a value I am looking for to one I need, ie students.filter((r)=> r.id === '1') I need to do students.filter((r)=> r.id) but I get the result of id:[1,2,3] instead.

Here is a link to my code sandbox (you will notice my attempts are commented out). In the api all of the grades expand at once and I need only one at a time. I understand it is because this is an array that iterates, however I don't know if it is possible to get the id by its self on the click event.

{
"students":
 [
 {"firstName":"Sarah",
 "grades":["78","100","87"],
 "id":"1"},
 {"firstName":"Bob",
 "grades":["75","89","82"],
 "id":"2"},
 {"firstName":"Laura",
 "grades":["88","82","81"],
 "id":"3"}
 ] 
}

Answer 1

the answer was to find the current id by passing in the event as a prop to expandDiv() function. I still am not able to successfully match the id to the button to toggle state.

const expandDiv = (e) => {
    setActive(!isActive)
    console.log(e.currentTarget.id)
  }