ingrese la descripción de la imagen aquí

Esos componentes "avg" son el resultado de un .map (): mi problema es que cuando voy a hacer onMouseOver en un determinado componente, ¡toda la información sobre herramientas se abre al mismo tiempo! ¿Cómo evitar esto? Este es mi código:

 {evaluations.filter((item: Assessment) => item.data?.interview?.id === interview.item.id && item.data?.status?.name === StatusNameEnum.CLOSED).map((value: Assessment) => value.evaluation?.fitToJob?.suggestedProfiles?.map((element: SuggestedProfile, index: number) => <Grid container item lg={12} className="mb-16" justifyContent="space-between"> <Grid item lg={11} md={10} sm={11} xs={10}> <Typography className="average-style">{element.family?.name + " / " + element.specialization?.name}</Typography> </Grid> <Grid key={index} className="position-relative" item lg={1} onMouseOver={() => showSuggestedProfileTooltip(true)} onMouseLeave={() => showSuggestedProfileTooltip(false)} > {suggestedProfileTooltip && <AssessmentFitToJobTooltip evaluations={evaluations} interview={interview} /> } <Typography className="average-style">{`Avg: ${element.evaluation}`}</Typography> </Grid> </Grid> ))}