Error setting state for the empty array

[mcshakes]

Actual Error: Objects are not valid as a React child (found: object with keys {_id, title, description, date, price, creator}). If you meant to render a collection of children, use an array instead.

Following the instructions, I initialize the state of events to an empty array above the constructor within Events.js.

After the componentDidMount, fetchAllEvents is called and the events (all coming in as an array) apparently don't like to be replacing the initial empty array. Relevant code below

import Modal from "../components/modals/Modal";
import Backdrop from "./backdrop/Backdrop";
import AuthContext from "../context/auth-context";
import "./Events.css";

class EventsPage extends React.Component {
    state = {
        creatingStatus: false,
        events: []

    };

    static contextType = AuthContext;

    constructor(props) {
        super(props);

        this.state = {
            title: "",
            price: "",
            date: "",
            description: "",
        }
    }

    componentDidMount() {
        this.fetchAllEvents();
    }

    createEventHandler = () => {
        this.setState({ creatingStatus: true });
    }

    cancelEventCreation = () => {
        this.setState({ creatingStatus: false });   
    };

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    };

    fetchAllEvents = () => {
        let requestBody = {
            query: `
                query {
                    events {
                        _id
                        title
                        description
                        date
                        price
                        creator {
                            _id
                            email
                        }
                    }
                }
            `
        }

        fetch("http://localhost:8080/graphql", {
            method: "POST",
            body: JSON.stringify(requestBody),
            headers: {
                "Content-Type": "application/json"

            }
        })
        .then(res => {
            if (res.status !== 200 && res.status !== 201) {
                throw new Error("Failed!");
            }
            return res.json();
        })
        .then(resData => {
            const events = resData.data.events;

            this.setState({ events: events });
        })
        .catch(err => {
            console.log(err);
        })
    }

    render() {
        console.log("RENDER STATE =>", this.state)

        const allEvents = this.state.events;

        const eventList = allEvents && allEvents.map(event => {
            return <li key={event._id} className="events__list-item">{event.title}</li>                 
        })