I have a database where it has different rooms and whether each room is booked at a certain time (it's true if its available and false when it's booked). Whenever I try to console.log the value it works perfectly but whenever I try to h1 it or render it it gives me this error on the console:

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Here is the code where I attempt to render the value:

fetch('http://localhost:7000/Rooms')
            .then(res => res.json())
            .then(
                (result) => {
                    console.log(result[0].name)
                    result.map((room) => (
                        <div className="bookListing">
                            {console.log(room.Nine.toString())}
                            <p>Booked for: {room.Nine.toString()}</p>
                        </div>
                            ))
                }
            )`

Here is the json database code:

  "Rooms": [
{
  "Nine": true,
  "Ten": false,
  "Eleven": false,
  "Twelve": false,
  "One": false,
  "Two": false,
  "Three": true,
  "id": "room1",
  "name": "K102A"
},
{
  "Nine": true,
  "Ten": false,
  "Eleven": true,
  "Twelve": true,
  "One": true,
  "Two": true,
  "Three": true,
  "id": "room2",
  "name": "K102B"
},
{
  "Nine": true,
  "Ten": true,
  "Eleven": true,
  "Twelve": false,
  "One": true,
  "Two": true,
  "Three": true,
  "id": "room3",
  "name": "K101A"
},
{
  "Nine": true,
  "Ten": true,
  "Eleven": true,
  "Twelve": true,
  "One": false,
  "Two": true,
  "Three": true,
  "id": "room4",
  "name": "K101B"
},
{
  "Nine": false,
  "Ten": false,
  "Eleven": false,
  "Twelve": false,
  "One": false,
  "Two": false,
  "Three": false,
  "id": "room5",
  "name": "K101C"
}

]

Made in React JSx