resolve more React type compatibility issues

Author: didierkrux

lib/components/event-schedule-new/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Suspense } from "react";
 import moment from "moment";
 // import NewSchedule from './calendar'
 import Event from "./event/event";
@@ -148,7 +148,7 @@ const computeEventPlacements = (
   return eventPlacements;
 };
 
-const NewScheduleIndex = ({
+const NewScheduleIndexInner = ({
   selectedEvent,
   selectedDay,
   setSelectedEvent,
@@ -364,4 +364,12 @@ const NewScheduleIndex = ({
     </div>  */
 };
 
+const NewScheduleIndex = (props: ScheduleProps) => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <NewScheduleIndexInner {...props} />
+    </Suspense>
+  );
+};
+
 export default NewScheduleIndex;

lib/components/event-schedule/EventSchedule.tsx

@@ -1,6 +1,6 @@
 import { NextPage } from "next";
 import Image from "next/image";
-import React, { useEffect } from "react";
+import React, { useEffect, Suspense } from "react";
 import css from "./event-schedule.module.scss";
 import moment from "moment";
 import momentTZ from "moment-timezone";
@@ -2091,7 +2091,7 @@ const scheduleViewHOC = (Component: any) => {
   return ComponentWithScheduleView;
 };
 
-const Schedule: NextPage = scheduleViewHOC((props: any) => {
+const ScheduleInner: NextPage = scheduleViewHOC((props: any) => {
   const [openShareModal, setOpenShareModal] = React.useState(false);
   const [calendarModalOpen, setCalendarModalOpen] = React.useState(false);
   const { scheduleView, setScheduleView } = props;
@@ -2611,6 +2611,14 @@ const Schedule: NextPage = scheduleViewHOC((props: any) => {
   );
 });
 
+const Schedule: NextPage = (props: any) => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ScheduleInner {...props} />
+    </Suspense>
+  );
+};
+
 export default Schedule;
 
 type Edition = "istanbul" | "amsterdam";