Firestoreからイベントのドキュメントを取得し、FullCalender（React）でイベントを表示したい

Question

Firestoreからイベントのドキュメントを取得し、FullCalender（React）でイベントを表示したい

Reactの環境でFullCalenderとFirestoreで、カレンダーアプリを作成しているのですが、Firestoreに存在するイベントのドキュメントを取得しカレンダーに表示することができず、困っています。
どのように解決すればいいか教えていただけませんでしょうか。
何卒よろしくお願い致します。

import React, {useState,useEffect} from 'react';
import firebase from "./firebase/Firebase";
import FullCalendar from "@fullcalendar/react";
　

const App = () =>{
const [myEvents, setMyEvents] = useState([　　　　　//イベントを表示するために連想配列をstateに格納
{
　　　　id: 0,
　　　　title: "0 は、firestore内でソートすると最後になるので初期設定とする",
　　　　start: "2021-09-22 10:00:00",
　　　　end: "2021-09-22 15:00:00",
},
]) 　　　　　　　　//　イベントを格納するstate
useEffect(() => {　　　　　　//　firestoreのコレクション"schedule"からid順にドキュメントを取得し追加
    firebase
    .firestore()
    .collection("events")
    .orderBy("id")
    .get()
    .then((query) => {
      query.forEach((doc) => {
        myEvents.push(doc.data());
      });
      console.log(myEvents);
    })
    .catch((error)=>{
      console.log(`データの取得に失敗しました (${error})`);
    });
  },[]);

return (
      <FullCalendar
        locale="ja" 
        events={myEvents} //カレンダーで表示するイベント
      />

);
}
export default App;

events //コレクション
│
├ abcd //ドキュメントID
│   ├ id: 1　　（数字）
│   ├ title: test1  （文字列）
│   ├ start: 2021年9月15日 0:00:00 UTC+9  （タイムスタンプ）
│   └ end: 2021年9月16日 0:00:00 UTC+9  （タイムスタンプ）
│
└ efgh　　//ドキュメントID
    ├ id: 2　　（数字）
    ├ title: test2  （文字列）
    ├ start: 2021年9月22日 0:00:00 UTC+9　　（タイムスタンプ）
    └ end: 2021年9月23日 0:00:00 UTC+9　　（タイムスタンプ）

console.log(myEvents)で計３つの連想配列がmyEventに格納されていることはコンソールで確認しました。
しかし、FullCalenderの方ではmyEventを読み取っておらず表示できていません。

試したこと

試したことは、

• Firestoreに格納されているデータの型が上手く読み取れていないのかと思い、文字列として日時を格納したがダメだった。
• myEventをカレンダーが読み取る際にidが必要のようで、idの順に取得するように.orderBy("id")を使い、idが配列の順番と一致するようにした。

いずれも解決には繋がりませんでした。

補足情報（FW/ツールのバージョンなど）

react初心者です。１、２ヶ月前からreactを触っていますが、純粋なJavaScriptは未経験です。すみません。

├── @firebase/firestore@3.0.1
├── @fullcalendar/core@5.9.0
├── react@17.0.2

Answer 1

反映できなかった理由は、データベースのタイムスタンプ型とFullCalenderのDate型による相違で読み込むことができなかったようです。
そこでデータをFirestoreから取得する際にデータの形を.toDate()を使って編集してから格納することでなんとか解決しました。
本当は.pushを使わずにmapを使いたいのでどなたかご存知であれば、ここに回答して頂けると幸いです。

firebase.firestore().collection("schedule")
    .get().then((query) => {
      query.forEach((doc) => {
        var data = doc.data();
        myEvents.push(
          {
          id: data.id,
          title: data.title,
          start: data.start.toDate(),
          end: data.end.toDate(),
          }
        );
      });
　　　　　　　　　　})；