import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [props, setProps] = useState({
  multiple: true,
  plugins: [colors({ defaultColor: "green" })],
  calendar: persian,
  locale: persian_fa,
  calendarPosition: "bottom-right"
});
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
/> 

import React, { useState } from "react"
import DatePicker, { DateObject } from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"
import DatePanel from "react-multi-date-picker/plugins/date_panel";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const yesterday = new DateObject({ calendar: persian }).subtract(1, "day");
const today = new DateObject({ calendar: persian });
const tomorrow = new DateObject({ calendar: persian }).add(1, "day");

yesterday.color = "red";
today.color = "blue";
tomorrow.color = "red";

const [props, setProps] = useState({
  multiple: true,
  value: [yesterday, today, tomorrow],
  plugins: [
    colors({ colors: ["blue", "red"] }),
    <DatePanel sort="color" />,
  ],
  calendar: persian,
  locale: persian_fa,
  calendarPosition: "bottom-right"
});
.
.
.
<DatePicker 
  {...props} 
  onPropsChange={setProps} 
/>