Show Object in Object in React

Hello I have a data like this in json

data =   {
    "1": {
        "success": true,
        "cache_last_updated": 1638898857253,
        "win_rate": 0,
        "mmr": 1303,
        "last_claim": 1638245364,
        "name": "test 1",
        "next_claim": 1639454964
      },
      "2": {
        "success": true,
        "cache_last_updated": 1638899627451,
        "win_rate": 0,
        "mmr": 1922,
        "last_claim": 1638077836,
        "name": "test 2",
        "next_claim": 1639287436
      },
      "3": {
        "success": true,
        "cache_last_updated": 1638899627442,
        "win_rate": 0,
        "mmr": 1214,
        "last_claim": 1638078027,
        "name": "test 3",
        "next_claim": 1639287627
      }
    }

May I ask for your help on how I fetch the data on 1, 2 ,3 separately? I’m having a problem on fetching then separately.

My implementation

const App = () => {
    const [test, setTest] = useState([]);
    return (
        <div>
            <h1 style={{ textAlign: "center" }}>Test Data</h1>

            <div style={{ textAlign: "center" }}>
                <div>{JSON.stringify(data)}</div>
            </div>
        </div>
    );
};

export default App;

When I’m trying this it shows all the data, but I can’t fetch them one by one.