Prevent selection of date range with invalid date inbetween

Question

I am using a daterangepicker to select a range of dates. Once there are invalid dates in between the range it shouldn't go over them to another date.

Something similar to this question, however that uses Bootstrap daterangepicker whereas I am using DateRangePicker

var dateRanges = [{
    'start': moment('2019-06-28'),
    'end': moment('2019-07-5')
  },
];

$('input[name="daterange"]').daterangepicker({
  autoUpdateInput: false,
  autoApply: true,
  opens: 'left',
  setStartDate: new Date(),
  minDate: moment().startOf('day').add(2, 'day'),
  locale: {
    "format": "DD/MM/YYYY",
  },
  isInvalidDate: function(date) {
    return dateRanges.reduce(function(bool, range) {
      return bool || (date >= range.start && date <= range.end);
    }, false);
  },
});

$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
    'DD/MM/YYYY'));
})

input {
  width: 400px;
  height: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" name="daterange" readonly="true" readonly value="">