How to export the Scheduler as image/pdf in React

I am trying to export my reel using exportAs but I cant get it to work.

Here’s the structure of my scheduler, its all held in state and then rendered using schedulerRef pointing to this state.

const [state, setState] = useState({

    timeHeaders: [
      {
        groupBy: 'Month',
      },
      {
        groupBy: 'Day',
        format: 'd',

      }
    ],
    //cellWidthSpec: "Auto",
    cellWidth: 100,
    //rowHeaderScrolling: true
    scrollBarVisible: true,
    durationBarVisible: true,
    scale: 'Day',
    days: weekView ? numDaysweek : monthView,
    startDate: monthstart ? new Date(today.getFullYear(), month - 1, monthstart + 1) : _start,
    eventMovingStartEndEnabled: true,
    eventStackingLineHeight: 0,
    rowClickHandling: true,
    eventOverlapHandling: false,
    ResizeObserver: true,
    eventCopyingStartEndEnabled: true,
    eventResizingStartEndEenabled: true,
    timeRangeSelectingStartEndEnabled: true,
    addEventHandlers() {
      //show state for printing when button pressed
      if (printout) {
        state.exportAs("jpg").print();
      };
      setPrintout(false);
    },
    },
    onBeforeCellRender: args => {
      if (args.cell.start.getDayOfWeek() === 6 || args.cell.start.getDayOfWeek() === 0) {
        args.cell.backColor = "#d9ead3";
      }

      var item = globalHoliday.find(function (range) {
        var start = new DayPilot.Date(range.start);
        var end = new DayPilot.Date(range.end).addDays(1);
        return DayPilot.Util.overlaps(start, end, args.cell.start, args.cell.end);

      });


      if (item) {
        args.cell.backColor = item.backColor;
        args.cell.headerColor = item.headerColor;
      }
      //args.cell.html ="Test";
    },

    timeRangeSelectedHandling: 'Enabled',

    onTimeRangeSelected: async (args) => {
    //bunch of stuff to capture on selection
    //backend sync also somewhere here
    },

    eventMoveHandling: 'Update',
    onEventMoved: (args) => {
      args.control.message('Event moved: ' + args.e.text());
      eventMove(args.e.data);
    },
    eventResizeHandling: 'Update',
    onEventResized: (args) => {
      args.control.message('Event resized: ' + args.e.text());
    },
    eventDeleteHandling: 'Update',
    onEventDeleted: (args) => {
      args.control.message('Event deleted: ' + args.e.text());
      eventDelete(args.e.data);
    },
    eventClickHandling: 'Enabled',
    onEventClick: async (args) => {
      if (args.ctrl) {
        args.control.multiselect.add(args.e);
        console.log("New args---", args.e.data);
        multiclipboard.push(args.e.data);
      }
      else {
        //do nohting
        return;
      }
    },
    eventHoverHandling: 'Bubble',


    onRowSelect: function (args) {
      window.console && console.log(args.row.toJSON());
    },
    rowHeaderColumns: [
      {
        title: 'Name',
        width: 100,
        value: 'name',
      },
      {
        title: 'Hours',
        width: 100,
        display: 'hours',
      },
      {
        title: 'Leave Hours',
        width: 100,
        display: 'leavehours',
      }

    ],



    return (
    <PageContainer

    <div>bunch of stuff<\div> 
    <div>bunch of stuff<\div>
    <div>bunch of stuff<\div>


    //how i export my scheduler for view
    <DayPilotScheduler {...state} ref={schedulerRef} />

       <PageContainer>
       )




///SO I ADDING THIS AND REMOVING THE REF ABOVE, BUT GET ERROR exportAs 
///not a known function. Please help



      <div>
          <Button type="primary" onClick={() => {
            setPrintout(true);
            const scheduler = schedulerRef.current;
            scheduler.exportAs("jpg").print();
            console.log("print button clicked");
          }}>Print</Button>
          <DayPilotScheduler {...state} ref={schedulerRef} />
        </div>