enter image description here

Those "avg" components are the result of a .map (): my problem is that when I go to do the onMouseOver on a certain component, all the tooltips open at the same time! How to avoid this? This is my code:

{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>
                ))}