title: Display element for one person on hover
body: <p>I am rendering a list of students, some of which have failed their exams. For those who have failed their exams, I display a red square behind their avatars. </p>
  
  <p>Whenever I hover over a student's avatar I want to display the subject that student has failed. My issue at the moment is that I display the <code>subjects</code> for all students, not only the one I've hovered over.</p>
  
  <p>How can I display only the <code>mainSubject</code> for the student who's avatar I hovered on?</p>
  
  <p>Here is a link to my code sandbox: <a href="https://codesandbox.io/embed/billowing-browser-9crlu?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Example Link</a></p>