I want to disable next/previous component onPressHandler !

[kishan-wts]

When i select date range i want to disable month change functionality....can anyone Help me out??

[kishan-wts]

const DragSelectCalendar = ({
  onDateChange,
  onVisibleMonthsChange,
  allowRangeSelection = true,
  calenderRef,
  customDatesStyles,
  isLoading = false,
}) => {
  const minDate = new Date(); 
  const isDateSelected =
    calenderRef?.current?.state?.selectedStartDate != null ? true : false;

  const _renderArrow = direction => {
    let iconName = 'chevron-thin-right';
    if (direction == 'left') {
      iconName = 'chevron-thin-left';
    }

    return (
      <View style={isDateSelected ? styles.hideArrow : styles.arrowContainer}>
        <Entypo
          disabled={isDateSelected}
          name={iconName}
          size={normalizeText(16)}
          color={isDateSelected ? COLORS.gray_Superlite : COLORS.Black}
        />
      </View>
    );
  };

  return (
    <>
      <CalendarPicker
        maxRangeDuration={31}
        ref={calenderRef}
        width={screenWidth - 40}
        allowRangeSelection={allowRangeSelection}
        minDate={minDate}
        selectedDayColor={COLORS.primary}
        selectedDayTextColor={COLORS.white}
        onDateChange={onDateChange}
        nextComponent={_renderArrow('right')}
        previousComponent={_renderArrow('left')}
        onMonthChange={
          isDateSelected
            ? () => {
                console.log('***123');
                return;
              }
            : onVisibleMonthsChange
        }
        customDatesStyles={customDatesStyles}
      />
    </>
  );
};

export default DragSelectCalendar;

const styles = StyleSheet.create({
  arrowContainer: {
    height: 40,
    width: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  hideArrow: {
    height: 40,
    width: 40,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
    backgroundColor: 'red',
    top: 500,
  },
});