请教一下react+antd日期选择器禁用问题 ？？

功能需求就是时间跨度最大为一个月 并且当天以后的禁用 就这个时间跨度最大一个月 试了好多种办法都行 有没有大佬帮我看看代码哪里出了问题 都贴上来了react版本 17.0.2

import { useEffect, useState, useRef } from "react";
import { Modal, Form, DatePicker, message } from "antd";
import moment from "moment"; // 日期转换器
import "./taskModule.less";
// 解构出需要的值避免eslient警告
const PlatModule = ({ isModalVisible, columns, cbState }) => {
  // form操作
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  useEffect(() => {
    if (isModalVisible) {
      form.resetFields();
      setNumRanges(1);
    }
  }, [isModalVisible, columns, form, cbState]);
  // 确认
  const handleOk = () => {
    form
      .validateFields()
      .then(async (values) => {
        cbState(false);
      })
      .catch((error) => {
        message.error("请填完所需选项");
      });
  };

  //   时间的相关
  const [dates, setDates] = useState(null);
  const [values, setValues] = useState([[], [], []]);
  const [numRanges, setNumRanges] = useState(0);
  const [time, setTime] = useState([{ start_date: null, end_date: null }]);
  const rangePickerRef = useRef(null);
  const setValue = (index, val) => {
    if (val) {
      setTime((prevTime) => {
        const newTime = [...prevTime];
        newTime[index] = {
          start_date: moment(val[0]._d).format("YYYY-MM-DD"),
          end_date: moment(val[1]._d).format("YYYY-MM-DD"),
        };
        return newTime;
      });
    }
    const newValues = [...values];
    newValues[index] = val;
    setValues(newValues);
  };
  const handleAdd = () => {
    if (numRanges < 3) {
      setNumRanges(numRanges + 1);
    }
  };
  const disabledDate = (current) => {
    if (current && current > moment().endOf("day")) {
      return true;
    }
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], "days") >= 30;
    const tooEarly = dates[1] && dates[1].diff(current, "days") >= 30;
    if (tooEarly || tooLate) {
      return true;
    }
    const startDate = moment(time[0].start_date);
    const diff = current.diff(startDate, "days");
    return diff > 30;
  };
  const onOpenChange = (open) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };
  const layout = {
    labelCol: { span: 9 },
    wrapperCol: { span: 15 },
  };
  return (
    <Modal
      forceRender // 解决Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop? 报错
      width={1000}
      visible={isModalVisible}
      title="选择"
      onOk={handleOk}
    >
      <Form
        form={form}
        {...layout}
        name="task-form"
        style={{ marginLeft: "-350px" }}
        validateTrigger="onBlur"
      >
        <Form.Item label={<div className="fomart">选择时间范围</div>}>
          <div className="timeFlex">
            {[...Array(numRanges)].map((_, i) => (
              <RangePicker
                key={`${i}_range`}
                name={`template_time_${i}`}
                value={values[i]}
                disabledDate={disabledDate}
                onChange={(val) => {
                  setValue(i, val);
                }}
                onOpenChange={onOpenChange}
                changeOnBlur
                ref={rangePickerRef}
              />
            ))}
            {+numRanges < 3 && (
              <div className="time_item" onClick={handleAdd}>
                + 添加时间范围
              </div>
            )}
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default PlatModule;