JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<input type="text" placeholder="Date" name="daterange" class="form-control date-picker form-date" id="date-picker" />
<input type="text" placeholder="Date" name="daterange" class="form-control date-picker-2 form-date" id="date date-picker-2"/>

JavaScript

var autoupdate = false;

	function date1(){
		$('.date-picker').daterangepicker({
		  singleDatePicker: true,
		  showDropdowns: true,
		  minDate: moment().subtract(1, 'years'),
		  autoApply: true,
		  disabledDays: 'today',
		  maxDate: moment().subtract(1, 'days'),
		  autoUpdateInput: autoupdate,
		  locale: {
		    format: 'DD-MM-YYYY'
		  }
		}, function(chosen_date) {
		  $('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
		});
		  };
		date1();

		$('.date-picker').on('apply.daterangepicker', function(ev, picker) {
		    if ($('.date-picker').val().length == 0 ){
		    autoupdate = true;
		    console.log('true');
		    date1();
		  };
		  var departpicker = $('.date-picker').val();
		  $('.date-picker-2').daterangepicker({
		    minDate: departpicker,
        //how to set max 9 days after datepicker 1 selected
		    maxDate: moment(departpicker, 'DD-MM-YYYY').add(9, 'days'),
		    singleDatePicker: true,
		    showDropdowns: true,
		    autoApply: true,
		    locale: {
		      format: 'DD-MM-YYYY'
		    }
		  });
		  
		  var drp = $('.date-picker-2').data('daterangepicker');
		  drp.setStartDate(departpicker);
		  drp.setEndDate(departpicker);
		});