I'm currently rewriting the website of my fraternity using REACT.js. In the previous version of the site i already used FullCalendar to display our google calendar on the website. New im using the exact same method but translated to react. But the calendar does not seem to get populated by the API. (I censored my key btw)

The code for my calendar component:

import React, { Component } from 'react'
import FullCalendar, { formatDate } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import nlLocale from '@fullcalendar/core/locales/nl'
import googleCalendarPlugin from '@fullcalendar/google-calendar'

export default class fullCal extends Component {
    render() {
        return (
        <FullCalendar
            locale={nlLocale}
            plugins={[dayGridPlugin, listPlugin, googleCalendarPlugin]}

            googleCalendarApiKey='mykey-SKL7JHxMn3Iblibblob22ijHXNGlI'

            events={[
                {
                    googleCalendarId: '86f3iqrt1q4vmua5pb0fb4q358@group.calendar.google.com',
                    className: 'gcal-event'
                }
            ]}


            headerToolbar={{
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,listWeek'
            }}
            initialView='dayGridMonth'
            editable={false}
            selectable={false}
            displayEventTime={true}
            eventTimeFormat={{
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false,
                hour12: false
            }}
            nextDayThreshold = '23:59:00'
            
            eventColor='#971849'
            eventTextColor='#ddd'

            firstDay={1}        
        />
        )       
    }    
}