Material UI DatePicker Showing Wrong Date

Hi,

I have a datepicker that looks like this, created using material ui v4 :

import DateFnsUtils from '@date-io/date-fns'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';


const [task_start_date, setTaskStartDate] = useState(new Date());

<MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
           margin="normal"
           id="date-picker-ddialog"
           helperText="Set start date"
           format="yyyy-MM-dd"
           fullWidth
           inputVariant="outlined"
           value={task_start_date}
           onChange={setTaskStartDate}
           KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
         />

    </MuiPickersUtilsProvider>

I have been trying several methods to update the correct state of my date but it keeps posting the date as the day before. I have also tried setting the date with moment and specifying the timezone and referring to this this post but my error persists.

My dependancies are:

"dependencies": {
    "@date-io/date-fns": "1.3.13",
    "@date-io/moment": "1.3.13",
    "@material-ui/core": "4.11.4",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "4.11.2",
    "@material-ui/pickers": "^3.2.8"

Any advise/recommendations will be appreciated.

You can set the timezone using setUTCHours on your date object

Then if you do console log you should see the right date
console.log(event.toUTCString());

I would highly suggest playing around with the MDN examples to understand how it works