React - как вывести результаты get запроса в html список?

У меня есть такой ответ от сервера:

{
    "status": "fail",
    "test_result": {
        "passed": [
            {
                "test": "app.test.test_auth.MyTest.test_success"
            }
        ],
        "errors": [
            {
                "test": "app.test.test_auth.MyTest.test_error",
                "traceback": "Traceback (most recent call last):\n  File \"C:\\Users\\Asus\\PycharmProjects\\app\\test\\test_auth.py\", line 15, in test_error\n    self.assertEqual(1 / 0, 1)\nZeroDivisionError: division by zero\n"
            }
        ],
        "failures": [
            {
                "test": "app.test.test_auth.MyTest.test_fail",
                "traceback": null
            }
        ],
        "skipped": []
    }
}

И такой код приложения:

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            status: '',
            test_result: {}
        };
        this.handleCLick = this.handleCLick.bind(this)
    }

    handleCLick() {
        axios.put('http://localhost:8000/sc')
            .then(response => {
                this.setState({status: response.data.status});
                this.setState({test_result: response.data.test_result});
                })
    }

    render(){

        return (
            <div>
                <button onClick={this.handleCLick}>Start</button>
                <p>{this.state.status}</p>
                <ul>
                    <li>
                        {this.state.test_result}
                    </li>
                </ul>
            </div>
        )
    }
}

Как вывести test из каждого элемента? Никак не могу разобраться с ключами