Disable different month from start date in datepicker react js

The <DatePicker> component has a maxDate property. So you need to add 1 more variable that will be updated on the startDate change and will hold the "last day of the selected month". useMemo ideally works for that.

Updates requested in comments:

For 2 modes of DatePickers you will need 2 useMemo variables. For first mode - maxDate will be the endOfCurrentMonth. For second one - endOfCurrentYear.

Additianlly added a useEffect to reset endDate when startDate changes, remove if not needed.

import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import { useEffect, useMemo, useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();
  const minStartDate = useMemo(() => {
    return new Date("2020");
  }, []);

  const startDateEndOfMonth = useMemo(() => {
    if (!startDate) return undefined;
    const lastDayOfMonth = new Date(
      startDate.getFullYear(),
      startDate.getMonth() + 1,
      0,
      23,
      59,
      59
    );
    return lastDayOfMonth;
  }, [startDate]);

  const startDateEndOfYear = useMemo(() => {
    if (!startDate) return undefined;
    const lastDayOfYear = new Date(startDate.getFullYear(), 11, 31, 23, 59, 59);
    return lastDayOfYear;
  }, [startDate]);

  useEffect(() => {
    setEndDate(startDate);
  }, [startDate]);

  return (
    <div>
      <p>THE CODE DATEPICKER BY MONTH </p>
      <>
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          showMonthYearPicker
          dateFormat="MM-yyyy"
          placeholderText="Tahun Awal"
          selected={startDate}
          minDate={new Date("2020")}
          onChange={setStartDate}
        />
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          showMonthYearPicker
          dateFormat="MM-yyyy"
          placeholderText="Tahun Akhir"
          minDate={startDate}
          maxDate={startDateEndOfYear}
          selected={endDate}
          onChange={setEndDate}
          disabled={!startDate}
        />
      </>

      <p>THE DATEPICKER BY DATE </p>
      <>
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          dateFormat="dd-MM-yyyy"
          placeholderText="Tanggal Awal"
          selected={startDate}
          minDate={minStartDate}
          onChange={setStartDate}
        />
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          dateFormat="dd-MM-yyyy"
          placeholderText="Tanggal Akhir"
          minDate={startDate}
          maxDate={startDateEndOfMonth}
          selected={endDate}
          onChange={setEndDate}
          disabled={!startDate}
        />
      </>
    </div>
  );
}