Update the calendar UI to reflect the new date selected as the first date displayed using the 'gotoDate' function

Question

Reduced Test Case

https://jsfiddle.net/ryj1023/5epnoguk/5/

HTML:

    <button
           onclick="updateDateRange()"
          >
            Click
          </button>
    <div id='calendar'></div>

JavaScript:

    const updateDateRange = () => {
     // calendar.gotoDate(new Date('11-04-2020')); // this will change the view because the date passed in the function isn't currently in view
     calendar.gotoDate(new Date('10-04-2020')); // this will not update the view with the passed in date as the first date in range because it's already in view
     }
     
     var calendarEl = document.getElementById('calendar');
     var calendar = new FullCalendar.Calendar(calendarEl, {
          events: [
            {
              id: 'a',
              resourceId: 'a',
              title: 'All Day Event',
              start: '2020-09-01',
            },
            {
              title: 'Long Event',
              start: '2020-09-07',
              end: '2020-09-10',
            },
          ],
          allDaySlot: false,
          displayEventTime: false,
          header: false,
          plugins: [ 'dayGrid', 'timeGrid', 'rrule'],
          defaultView: 'timeGridWeek',
          resourceOrder: 'sort',
          defaultDate: new Date('10-01-2020'),
    
          schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    
          views: {
            month: {
              type: 'dayGridMonth',
            },
            week: {
              type: 'resourceTimeline',
              slotLabelFormat: [
                {
                  weekday: 'short',
                  day: 'numeric',
                  month: 'short',
                },
              ],
              resourceLabelText: 'Property',
              duration: {
                days: 14, // getDefaultWeekDuration(start, end)
              },
              dateIncrement: {
                days: 1,
              },
              slotDuration: '24:00:00',
            },
          },
    
          // eventRender: ({ date, el, view }) => {
          // },
          themeSystem: 'bootstrap',
          eventOverlap: false,
          contentHeight: 'auto',
          resourceAreaWidth: '10%',
    
          resources: [{ id: 'a', title: 'Auditorium A' }],
        });
     
     calendar.render();

Bug Description

I'm trying to update the UI of the calendar using the 'gotoDate' function to so that the date I pass into the function will be reflected as the first date of the range shown. This feature works if the date I'm passing in the function is not already in the range shown in the view. When I select a date that shows in the current range, but is not the first date, the UI does not change.