In React JS I have a dropdown and a @material-ui keyboarddatepicker. My datepicker is bound to a field in a json file...

<div>                    
Expiry Date:<KeyboardDatePicker
id="ExpiryDate"
disablePast 
minDate={new Date()}
format="D/MM/yyyy" 
mask="__/__/____"
value={Person.LocationExpiryDate} 
/>
</div>

Note the bound value above from the'Person' model.

I have a dropdown control which on it's onChange event I would like to change the value in the keyboarddatepicker to 6 months hence....

{this.DropdownControl(lookups.PracticeLocations, true, Person.CPPEPracticeLocation, event => this.HandleChangePerson(event, 'Location'))}
</div>

HandleChangePerson (event, propertyName) {

if (propertyName == 'Location') {

// Get date 6 months from today
const todayDate =  new Date().toISOString().slice(0, 10);
const newExpiryDate = moment(todayDate).add(6, 'M').format('D/MM/YYYY') 
// TODO: code here to change the keyboarddatepicker value.

}

I've tried using state and plain js to change the value but because it is already bound it doesn't change the value

I've looked up 'two way binding' but can't seem to find anything that references using a model.