Как отрендеритm масcив объектов в который пришел из API и хранится в State?

Нужно каким то образом отрендерить все данные из API.

Есть функция и она принимает масив и рисует их:

const renderDataToTbody =  (infobus , index) => {
    const rendereDataBody = document.getElementById("rendredHere")
    
    let dataBusElement = (
        <tr key={infobus.index}>
          <td>{infobus.amountOfPlaces}</td>
          <td>{infobus.costOfTrip}</td>
          <td>{infobus.endBusTrip}</td>
          <td>{infobus.nameOfBus}</td>
          <td>{infobus.numberOfBus}</td>
          <td>{infobus.numberOfWay}</td>
          <td>{infobus.sequenceOfStops}</td>
          <td>{infobus.startBusTrip}</td>
        </tr>
    )
          console.log(infobus)
          ReactDOM.render(dataBusElement, rendereDataBody)  //RENDE
    } 

Но нужно рендерить в блок (renderedHere) по нажатию на кнопку(render__button)

На данном этапе рендерится только последний ряд из всего масива. Вот фото

Вот ссылка на песочницу (https://codesandbox.io/s/serene-glade-99fg9) Вот весь код компонента

import React, { useState } from "react";
import ReactDOM from "react-dom";
// import axios from 'axios';
import * as ReactBootStrap from "react-bootstrap";
import "../src/styles.css";
import firebase from "firebase/app";
import "firebase/database";
try {
  firebase.initializeApp({
    apiKey: "AIzaSyCsMQmMpcbBbO8e-MIs3T7JBjj7HO3d1U0",
    authDomain: "database-c3d42.firebaseapp.com",
    databaseURL:
      "https://database-c3d42-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "database-c3d42",
    storageBucket: "database-c3d42.appspot.com",
    messagingSenderId: "343229651763",
    appId: "1:343229651763:web:a172b056e0de9afa28bc46"
  });
} catch (err) {
  // we skip the "already exists" message which is
  // not an actual error when we're hot-reloading
  if (!/already exists/.test(err.message)) {
    console.error("Firebase initialization error", err.stack);
  }
}

const App = () => {
  const [BusInfo, setBusInfo] = useState(
    []
  ); /*Use hook useState for keeping STATE*/
  const database = firebase.database(); // connect to FIREBASE
  // FUNCTION for getting Data from API (FireBase)
  const getDataFromFireBase = async () => {
    let res = [];
    await database.ref("data").on("value", (snapshot) => {
      snapshot.forEach((snap) => {
        BusInfo.push(snap.val());
      });
    });
    return res;
  };
  const FetchData = () => {
    getDataFromFireBase(setBusInfo);
    console.log(BusInfo);
  };

  const renderDataToTbody = (infobus, index) => {
    const rendereDataBody = document.getElementById("rendredHere");
    let dataBusElement = (
      <tr key={index}>
        <td>{infobus.amountOfPlaces}</td>
        <td>{infobus.costOfTrip}</td>
        <td>{infobus.endBusTrip}</td>
        <td>{infobus.nameOfBus}</td>
        <td>{infobus.numberOfBus}</td>
        <td>{infobus.numberOfWay}</td>
        <td>{infobus.sequenceOfStops}</td>
        <td>{infobus.startBusTrip}</td>
      </tr>
    );

    console.log(infobus);

    if (rendereDataBody) {
      ReactDOM.render(dataBusElement, rendereDataBody); //RENDER
    }
  };

  /*-*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*--*-*- */
  return (
    <div className="App">
      <h1> БАЗА ДАННИХ "РОЗКЛАД АВТОБУСІВ"</h1>
      <button className="fetch-button" onClick={FetchData}>
        Fetch DATA
      </button>
      <div id="BusInfo">
        <ReactBootStrap.Table>
          {" "}
          {/*Здесь отрисовываем верхний столбик с полями  */}
          <thead>
            <tr>
              <th>Кількість Місць</th>
              <th>Вартість Білету</th>
              <th>Місце Прибуття</th>
              <th>Марка Автобусу</th>
              <th>Номер Автобусу</th>
              <th>Номер Маршруту</th>
              <th>Пункти Зупинок</th>
              <th>Місце відбуття</th>
            </tr>
          </thead>
          <tbody id="rendredHere"></tbody>
        </ReactBootStrap.Table>
        <button onClick={() => BusInfo.map(renderDataToTbody)}>
          RENDER TABLE
        </button>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
export default App;