How to separate fetch json data in React

I have a component with an array with an icon on it, and when I hover it over, it shows a div with data taken from the .json file. Now {data.strenght} renders all records to every div in the table row and every div looks the same on hovering over the icon. However, I want each div in the line to have the rendered content of the line as it is in the .json file. It is probably best to show it in the pictures.

For now is like this –
https://imgur.com/a/r0SDhy8

And it should be like this –
https://imgur.com/a/axPrBKR

How to do it?

React file

import react from "react";
import funcData from './testData.json';

    function TestFunc() {
        return (
            <div>
                {funcData.map(data => {
                    return (
                        <div key={data.id}>
                            <p>{data.strenght}</p>
                            <p>{data.health}</p>
                        </div>
                    )
                })}
            </div>
        );
    }

    export default TestFunc

JSON file

[
    {   
        "id": "1",
        "strenght": "20",
        "health": "15"
    },
    
    {
        "id": "2",
        "strenght": "555",
        "health": "5"
    }
]