Object is Not a Function When Running a GQL Mutation in ReactJS

I have a GQL mutation that updates the data for an event, I want to request an update when a .pdf document is loaded. For loading PDFs I'm using React PDF Viewer the package provides an event called onDocumentLoad which gets called when a .pdf file is successfully loaded.

My goal is to update a column in the DB when the user opens the .pdf file.

Starting with my updateEvent.js mutation, here's my code ...

import { gql } from 'react-apollo';

const updateEventMutation = gql`
  mutation updateEventMutation($event: EventInput!) {
    updateEvent(event: $event) {
      name
      numGuests
      configurationId
      eventOrderId
      roomId
      venue {
        venueId,
        name,
        logo,
        heroImage
        # TODO: add bannerImage to Venue
        # bannerImage
      }
    }
  }
`;

export default updateEventMutation;

The component where I'm trying to run this mutation in SlidingPDFViewer.js ...

import React from 'react';

import onClickOutside from 'react-onclickoutside';

import { graphql, compose } from 'react-apollo';

import { connect } from 'react-redux';

import {
  SpecialZoomLevel,
  MinimalButton,
  ScrollMode,
  Position,
  Tooltip,
  Viewer,
  Icon
} from '@react-pdf-viewer/core';

import {
  pageNavigationPlugin
} from '@react-pdf-viewer/page-navigation';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/page-navigation/lib/styles/index.css';

import updateEventMutation from '../../../mutations/updateEvent';

const disableScrollPlugin = () => {
  const renderViewer = (props) => {
    const { slot } = props;

    if (slot.subSlot && slot.subSlot.attrs && slot.subSlot.attrs.style) {
      slot.subSlot.attrs.style = Object.assign(
        {},
        slot.subSlot.attrs.style,
        { overflow: 'auto' } /* To Hide Scrollbar, Set This to Hidden */
      );
    }

    return slot;
  };

  return { renderViewer };
};

const SlidingPDFViewer = ({ pdfURL, termsAcceptedTimestamp }) => {
  const disableScrollPluginInstance = disableScrollPlugin();
  const pageNavigationPluginInstance = pageNavigationPlugin();

  const { GoToNextPage, GoToPreviousPage } = pageNavigationPluginInstance;

  return (
    <div
      style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        position: 'fixed',
        height: '90%',
        width: '60%',
        left: '20%',
        top: '5%',
      }}
    >
      <div
        style={{
          transform: 'translate(24px, -50%)',
          position: 'absolute',
          top: '50%',
          zIndex: 1,
          left: 0,
        }}
      >
        <GoToPreviousPage>
          {(props) => (
            <Tooltip
              position={Position.BottomCenter}
              target={
                <MinimalButton onClick={props.onClick}>
                  <Icon size={16}>
                    <path
                      d="M18.4.5,5.825,11.626a.5.5,0,0,0,0,.748L18.4,23.5"
                    />
                  </Icon>
                </MinimalButton>
              }
              content={() => 'Previous Page'}
              offset={{ left: 0, top: 8 }}
            />
          )}
        </GoToPreviousPage>
      </div>
      <div
        style={{
          transform: 'translate(-24px, -50%)',
          position: 'absolute',
          top: '50%',
          zIndex: 1,
          right: 0,
        }}
      >
        <GoToNextPage>
          {(props) => (
            <Tooltip
              position={Position.BottomCenter}
              target={
                <MinimalButton onClick={props.onClick}>
                  <Icon size={16}>
                    <path
                      d="M5.651,23.5,18.227,12.374a.5.5,0,0,0,0-.748L5.651.5"
                    />
                  </Icon>
                </MinimalButton>
              }
              content={() => 'Next Page'}
              offset={{ left: 0, top: 8 }}
            />
          )}
        </GoToNextPage>
      </div>
      <Viewer
        fileUrl={pdfURL}
        plugins={[disableScrollPluginInstance, pageNavigationPluginInstance]}
        defaultScale={SpecialZoomLevel.PageWidth}
        scrollMode={ScrollMode.Horizontal}
        onDocumentLoad={async () => {
          
          await updateEventMutation({
            variables: {
              event: {
                eventId: "a9d36a3f-fa8f-4204-bcec-4b7df1a95b9f",
                
                numGuests: 1996,
              },
            },
          });

        }}
      />
    </div>
  );
};

const SlidingPDFViewerWithQuery = compose(
  graphql(updateEventMutation, {
    name: 'updateEventMutation',
  }),
)(SlidingPDFViewer);

const mapStateToProps = state => ({
  token: state.auth.token,
});

export default connect(mapStateToProps, null)(onClickOutside(SlidingPDFViewerWithQuery));

I'm receiving the following error when the event onDocumentLoad(...) is called ...

Uncaught (in promise) TypeError: Object(...) is not a function

I tried lots of solutions, but since I'm a bit new to GraphQL and React, I feel a bit lost.