я есть файл JSON, который имеет такую ​​структуру, как этот "data.json"

{
    "Object1": {
        "name": "1",
        "rank": "2"
    },
    "Object2": {
        "name": "3",
        "rank": "4"
    }
}

и в моем коде React у меня есть данные для установки моего состояния реакции. Я хочу передать Object2 другому компоненту, но я не могу дифференцировать данные.

// import packages
import React, { Component } from "react";
import io from 'socket.io-client';

class App extends Component {
    constructor() {
        super();

        this.state = {
            data: null
        };
        this.socket = io('http://localhost:5000');

        // Binders
        this.updateState = this.updateState.bind(this);
    }

    componentDidMount() {
        this.socket.on('send data', this.updateState);
    }

    updateState(result) {
        this.setState({
            data: result
        });
    }

    render() {
        return (
            <p style={{ textAlign: "center" }}>
                {this.state.data}
            </p>
        );
    }
}

export default App;

Когда я пытаюсь ссылаться на что-то вроде this.state.data или this.state.data.Object1.name, оно указывает на пустой объект. Что я делаю неправильно?