<DesktopDatePicker value={dateOfBirth} disableFuture onChange={(e:any, newVal:any)=> handleDate(e, newVal)} renderInput={(params:any) => <TextField {...params} error={false} />} /> HandleChange Function const handleDate = (e: any, newVal: any) => { console.log('formatted date', moment(e?._d).format()); const formattedDate = moment(e?._d).format(); setDateOfBirth(formattedDate); }; State variable and datatype const [dateOfBirth, setDateOfBirth] = useState<string>(null); Repopulating value setDateOfBirth(selectedBeneficiary?.dateOfBirth?.slice(0, 10));