FullCalendar Draggable React JS Как сохранить календарь при перезагрузке / обновлении

Question

Так что последние несколько дней я боролся за то, чтобы мой FullCalendar сохранялся при перезагрузке / обновлении sh страницы. Я могу сделать так, чтобы перетаскиваемые события в правой части моего календаря сохранялись, но не в самом календаре.

У меня есть следующий код:

let draggableEl = document.getElementById("external-events");

        new Draggable(draggableEl, {
          itemSelector: ".fc-event",
          eventData: function(eventEl) {
              let title = eventEl.getAttribute("title");
              let id = eventEl.getAttribute("data");
              let ranking = eventEl.getAttribute("ranking");
              let rating = eventEl.getAttribute("rating");
              let thumbnail = eventEl.getAttribute("thumbnail")
              let photo = eventEl.getAttribute("photo")
              let price = eventEl.getAttribute('price')
              let address = eventEl.getAttribute('address')
              return {
                title: title,
                ranking: ranking,
                rating: rating,
                id: id,
                thumbnail: thumbnail,
                photo: photo,
                price: price,
                address: address
              };
          }
        });

Мой метод рендеринга :

 render() {
    return (
      <div className="animated fadeIn p-4 demo-app">
        <Row>
          <Col lg={8} sm={8} md={8} style={{paddingLeft: "100px"}}>
            <div className="demo-app-calendar" id="mycalendartest">
              <FullCalendar
                defaultView="dayGridMonth"
                validRange= {{
                  start: this.props.startDate,
                  end: this.props.endDate
                }}
                header={{
                  left: "prev,next today",
                  center: "title",
                  right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                }}
                rerenderDelay={10}
                eventDurationEditable={true}
                editable={true}
                droppable={true}
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                ref={this.calendarComponentRef}
                weekends={this.state.calendarWeekends}
                events={this.state.calendarEvents}
                eventDrop={this.drop}
                // drop={this.drop}
                eventReceive={this.eventReceive}
                eventClick={this.eventClick}
                // selectable={true}
              />
            </div>
          </Col>

          <Col lg={3} sm={3} md={3}>
            <div
              id="external-events"
              className="external-eve"
            >
              <p align="center">
                <strong style={{fontSize: "22px", paddingRight: "20px"}}>Drag Your Preferences!</strong>
                <AddToPhotosIcon className="plusbtn" onClick={() => this.addPersonalisedEvent()}>+</AddToPhotosIcon>
                <GetAppIcon className="downloadbtn" onClick={() => this.downloadImage()}>Download Itinerary</GetAppIcon>
                <FacebookShareButton url={localStorage.getItem('myUrl')}>
                  <FacebookIcon size={26} round={true} />
                </FacebookShareButton>
              </p>
              {this.state.events.map(event => (
                <div
                  className="fc-event"
                  title={event.title}
                  ranking={event.ranking}
                  rating={event.rating}
                  thumbnail={event.thumbnail}
                  photo={event.photo}
                  price={event.price}
                  address={event.address}
                  data={event.id}
                  key={event.id}
                  style={{
                      padding: "7px",
                      margin: "10px",
                      backgroundColor: "rgb(253, 192, 80)",
                      border: "2px solid orange",
                      color: "#555",
                      fontWeight: "bold"
                  }}
                >
                  <img src={event.thumbnail} alt="feature" height="40px" width="40px" style={{borderRadius: "30px", margin: "8px"}} />
                  {event.title}
                </div>
              ))}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

Буду очень признателен за любую помощь в том, как я могу сделать так, чтобы при перетаскивании по календарю оставаться в том же месте / дне / дате, когда страница обновляется ..