DateRangePicker (из дат реакции) выдает и ошибку после реализации localStorage

Question

У меня есть простая установка DateRangePicker в моем компоненте React:

/* ========= App Dependencies ============= */
import React, { useState } from "react";
import { connect } from "react-redux";
import { DateRangePicker } from "react-dates";
import { AiFillCaretDown } from "react-icons/ai";
import { BsPlusCircleFill, BsPencilSquare } from "react-icons/bs";
import {
  setTextFilter,
  sortByDate,
  sortByPatientsName,
  setStartDate,
  setEndDate,
} from "../../store/filtersAction";
/* ========= Code ============= */
const SearchAppointments = (props) => {
  const [calendarFocused, setState] = useState(null);
  const [isAccordionOpen, setAccordion] = useState(false);

  function onDatesChange({ startDate, endDate }) {
    props.dispatch(setStartDate(startDate));
    props.dispatch(setEndDate(endDate));
  }
  function onFocusChange(calendarFocused) {
    setState(() => calendarFocused);
  }
  const toggleAccordion = () => setAccordion(!isAccordionOpen);

  return (
    <article className="appointments-article">
      <section
        className={isAccordionOpen ? "accordion accordion-open" : "accordion"}
      >
        <header className="accordion__header">
          <h2 className="accordion__heading h-heading-styles">
            Search Appointments
          </h2>
          <BsPlusCircleFill className="plus-circle" onClick={toggleAccordion} />
        </header>
        <div
          className={
            isAccordionOpen
              ? "accordion__body js-accordion-open-search"
              : "accordion__body"
          }
        >
          <div className="searchblock">
            <input
              className="searchblock__input"
              placeholder="Search appointments"
              type="text"
              value={props.filters.text}
              onChange={(e) => {
                props.dispatch(setTextFilter(e.target.value));
              }}
            />
            <div className="searchblock__select-wrapper">
              <select
                className="searchblock__select-btn h-btn-styles"
                value={props.filters.sortBy}
                onChange={(e) => {
                  if (e.target.value === "date") {
                    props.dispatch(sortByDate());
                  } else if (e.target.value === "patient's name") {
                    props.dispatch(sortByPatientsName());
                  }
                }}
              >
                <option value="date">Date</option>
                <option value="patient's name">Name</option>
              </select>
              <AiFillCaretDown className="caret-down" />
            </div>
          </div>

          <div className="datepicker-block">
            <DateRangePicker
              startDate={props.filters.startDate}
              endDate={props.filters.endDate}
              onDatesChange={onDatesChange}
              focusedInput={calendarFocused}
              onFocusChange={onFocusChange}
              startDateId={"dwjkhqkehwqjkeq"}
              endDateId={"cxzvcxbzbczxbz"}
              showClearDates={true}
              numberOfMonths={1}
              isOutsideRange={() => false}
              daySize={33}
            />
          </div>
        </div>
      </section>
    </article>
  );
};

const mapStateToProps = (state) => {
  return {
    filters: state.filters,
  };
};
export default connect(mapStateToProps)(SearchAppointments);

У меня также есть конфигурация хранилища Redux, в которой я реализовал localStorage:

import { createStore, combineReducers } from "redux";
import appointmentsReducer from "./appointmentsReducer";
import filtersReducer from "./filtersReducer";

/* =================================================
=========== STORE CONFIGURATION ================
================================================= */
const appName = "Appointments_Schedulling_App";
//localStorage.clear();
function saveToLocalStorage(state) {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch (e) {
    console.log(e);
  }
}
function loadFromLocalStorage() {
  try {
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) return undefined;
    return JSON.parse(serializedState);
  } catch (e) {
    console.log(e);
    return undefined;
  }
}
const rootReducer = combineReducers({
  appointments: appointmentsReducer,
  filters: filtersReducer,
});
const persistedState = loadFromLocalStorage();

const store = createStore(
  rootReducer,
  persistedState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;

Однако после реализации локального хранилища , Я получаю сообщение об ошибке в консоли, которое выглядит следующим образом::

Предупреждение: Неудачный тип опоры: Недействительный тип ввода: startDate типа string передано withStyles(DateRangePicker), ожидается object. в withStyles (DateRangePicker) (создается SearchAppointments) в SearchAppointments (создается ConnectFunction) в ConnectFunction (создается AppointmentsDashboardPage) в статье (создается AppointmentsDashboardPage) в div (создается AppointmentsDashboardPage) в AppointmentsDashboardPage (создается Context.Consumer) созданный AppRouter) в Switch (созданный AppRouter) в div (созданный AppRouter) в Router (созданный BrowserRouter) в BrowserRouter (созданный AppRouter) в AppRouter в Provider

Если я закомментирую persistedState переменной в моем магазине Redux, все возвращается в нормальное русло. Поэтому я подозреваю, что что-то не так с моей реализацией локального хранилища, но раньше я мало работал с ней, поэтому я не имею понятия, что может быть не так. Есть идеи, как это исправить?