Get events from Google Calendar to show in FullCalendar for React.js

I have tried displaying a Google Calendar in my React project with FullCalendar by following their events from Google Calendar instructions and got errors about unreachable code. Then I tried adapting it for React. The result was a nice calendar with no data.

Here is my code. As you can see, I am not using 'Calendar' like shown in the instructions but rather FullCalendar.

import React from "react";
import FullCalendar from '@fullcalendar/react'
import {Calendar} from "@fullcalendar/core";
import timeGridPlugin from "@fullcalendar/timegrid";
import googleCalendarPlugin from '@fullcalendar/google-calendar';

const GoogleCalendar = () => {
  return (      
    <FullCalendar
        plugins={[timeGridPlugin, googleCalendarPlugin]}
        initialView="timeGridDay"
        googleCalendarApiKey= <MY_API_KEY>
        events={[
            { googleCalendarId: <MY_CALENDAR_ID> }
          ]}
      />
    );
};

export default GoogleCalendar;

• When I use FullCalendar I see a calendar on the page but it contains no data from Google Calendar despite there being test events in there. I get no console errors.
• When I use Calendar instead of FullCalendar, I see a blank page and get the following errors:

Can anyone help me? I have not had any luck getting a Google Calendar to display on a page!

Many thanks