I can't access a constant updated by an external useState hook within the daypilot scheduler state

I have a constant called leave. The value is null until it is set by a dropdown list.

The value gets set and updated okay, I can access it with useEffect hook.

But when I try accessing it in timerangeselect so I can bundle it with args and send it to back end, it’s null or undefined. What could I be doing wrong?

const Scheduler = () => {
  const [leave, setLeave] = useState(null);
  const [config, setConfig] = useState({
    startDate: _start,
    days: 31,
    scale: "Day",
    timeHeaders: [
      { groupBy: "Month" },
      { groupBy: "Day", format: "d" }
    ],
    cellWidthSpec: "Auto",
    cellWidth: 50,
    durationBarVisible: false,
    treeEnabled: true,
    rowHeaderColumns: [
      { name: "Employee" }
    ],
    onEventMoved: args => {
      console.log("Event moved: ", args.e.data.id, args.newStart, args.newEnd, args.newResource);
      getScheduler().message("Event moved: " + args.e.data.text);
    },
    onEventResized: args => {
      console.log("Event resized: ", args.e.data.id, args.newStart, args.newEnd);
      getScheduler().message("Event resized: " + args.e.data.text);
    },
    onTimeRangeSelected: args => {
      DayPilot.Modal.form(form).then(modal => {
        getScheduler().clearSelection();
        console.log("Leave---", leave);

        const _args = {
          id: DayPilot.guid(),
          DayType: _type.id,
          start: args.start,
          end: args.end,
          resource: args.resource,
          leavetype: leave,
        };

        getScheduler().events.add({
          id: DayPilot.guid(),
          text: _type.text,
          start: args.start,
          end: args.end,
          resource: args.resource,
          barColor: "green",
          onRowSelect: redisSync(_args),
        });
      });
    }
  });

  const schedulerRef = useRef();

  const getScheduler = () => schedulerRef.current.control;

  const handleMonthSelect = (value) => {
    setMonth(value);
    console.log(value);
  };

  const redisSync = async (args) => {
    try {
      const response = await axios.post('/leaverequests', args);
      console.log("Post successful");
      console.log('Response:', response.data);
      // fetchRecordsByDesignation(targetDesignation);
    } catch (error) {
      console.error('Error sending data:', error);
    }
  };

  const loadData = (args) => {
    const resources = _resources;
    const events = _events;
    getScheduler().update({
      resources,
      events
    });
  };

  useEffect(() => {
    if (!leave) return;
    console.log("leaves", leave);
  }, [leave]);

  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      <div className="toolbar">
        <Row>
          <Col style={{ padding: 15 }}>
            <ProFormSelect
              name="SelectLeavetype"
              label="Select Leavtype"
              style={{ width: 200 }}
              valueEnum={{
                1: "Annual Leave",
                2: "Sick Leave"
              }}
              placeholder="Leave Type"
              onChange={(value) => {
                setLeave(value);
                console.log("value", value);
              }}
            />
          </Col>
        </Row>
      </div>
      <DayPilotScheduler {...config} ref={schedulerRef} />
    </div>
  );
};

export default Scheduler;