I'm trying to save the dates entered by the user in local storage and display them the next time the user visits the website. I'm using a datetime picker library called Flatpickr.

Here is the problem: when I pick the dates and save them in local storage, the dates get changed when I reload or close/reopen the page. For example, if I pick 2022-05-02 as my start date, it becomes 2022-05-01 when I refresh the page (same thing happens with the end date).

This is the code for the date picker component (I'm using a page builder called Creative Tim which is built on top of Material UI):

<MDDatePicker
value={minDate}
defaultValue={minDate?.toString()}
options={{ maxDate: maxDate ?? new Date(), allowInput: true }}
input={{
    placeholder: "Select a start date",
    endAdornment: (
    <InputAdornment position="end">
        <IconButton size="small" aria-label="close" color={textColor} onClick={resetImportFromDate}>
        <Icon fontSize="small">clear</Icon>
        </IconButton>
    </InputAdornment>
    ),
}}
onChange={fromDateChange}
/>

Here is the fromDateChange function:

  const fromDateChange = (date) => {
    setMinDate(new Date(date));
    LocalDataStore.set("minDate", date);
  };

And here is static set method defined on the LocalDataStore class:

  static set(key, value) {
    let type = typeof value;
    if (value && type !== "undefined") {
      if (type === "object") value = JSON.stringify(value);
      localStorage.setItem(key, crypto.AES.encrypt(value.toString(), key).toString());
    }
  }