FullCalenderでイベント表示のタイトルを改行したい

Question

FullCalenderでイベント表示のタイトルを改行したい

ReactでFullCalenderを用いてアプリを作っているのですが、タイトルと時間が改行して見えるように表示が出来ず困っています。

該当のソースコード

import React, {useStatet} from 'react';
import FullCalendar "@fullcalendar/react";

const App = () => {
const [myEvents, setMyEvents] = useState([ ///カレンダーに表示するイベント
{
      title: "オレンジ",
      id: 0,
      start: "2021-09-22 10:00:00",
      end: "2021-09-22 15:00:00",
    },
{
      title: "ブルー",
      id: 1,
      start: "2021-09-22 10:00:00",
      end: "2021-09-22 15:00:00",
    },
{
      title: "これはフルカレンダーのテストです",
      id: 2,
      start: "2021-09-22 10:00:00",
      end: "2021-09-22 15:00:00",
    },
])

return(
<FullCalendar 
  locale="ja" /// 日本語
  eventDisplay={'block'}
  eventTimeFormat={{ // like '14:30:00'
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        }}
  businessHours={{
          daysOfWeek: [1, 2, 3, 4, 5],
          startTime: "0:00",
          endTime: "24:00",
        }}
  weekends={true}
/>
)
}

↑この状態を、
時間
タイトル
の順番に重ならないように縦に並べたい。

試したこと

タイトル前にエスケープシークエンスとして<br>や"\n"を付け足しても変わらなかった。

const [myEvents, setMyEvents] = useState([ ///カレンダーに表示するイベント
{
      title: "\n"+"オレンジ",
      id: 0,
      start: "2021-09-22 10:00:00",
      end: "2021-09-22 15:00:00",
    },
}

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

タイトルだけcssで折り返しを反映させています。

.fc-event-title { /* 折り返し */
  white-space: normal;
}

Answer 1

CSSをいじることで変更できました！
.fc-h-event .fc-event-main-frameのクラスがdisplay: flexになっていたので縦で割れており、columnの並び方を指定したところ縦で並び替えれました！

.fc-h-event .fc-event-main-frame {/*タイトル縦並び*/
  flex-direction: column
}