title: I cannot change the date of mui-datepicker by onClick of a button
body: <p>I'm working on a changing date of mui-desktopdatepicker. I have two buttons that add/subtract 1 day from the date of desktopdatepicker. When i click on the desktopdatepicker, i can change the date, however i cannot add or subtract 1 day from the date. When I console.log the dates, i see the formats are same, i do not expect a problem. What am i missing ? (also same problem in mui-datepicker)</p>
  <pre><code>import { Button, TextField } from '@mui/material';
  import { useState, useEffect } from 'react';
  import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  import Box from '@mui/material/Box';
  
  export default function Counter() {
  
    const [date, setDate] = useState(new Date())
  
    const changeDate = isBack =&gt; {
      
      console.log(&quot;tempDate&quot;, date)
      let tempDate = date;
      if(isBack === &quot;left&quot;){
          console.log(&quot;tempDateL&quot;, date)
          tempDate.setDate(tempDate.getDate() - 1)
          console.log(&quot;tempDateL2&quot;, tempDate)
          setDate(tempDate)
      }
      else if(isBack === &quot;right&quot;){
          console.log(&quot;tempDateR&quot;, date)
          tempDate.setDate(tempDate.getDate() + 1)
          console.log(&quot;tempDateR2&quot;, tempDate)
          setDate(tempDate)
      }
    }
  
    useEffect(() =&gt; {
      console.log(&quot;dateX&quot;, date)
    },[date])
  
    return (
      &lt;Box sx={{display:&quot;flex&quot;, flexDirection: &quot;row&quot;}}&gt;
          &lt;Button sx={{marginRight: 3}} variant=&quot;contained&quot; onClick={() =&gt; changeDate(&quot;left&quot;)}&gt;
              {&quot;&lt;&quot;}
          &lt;/Button&gt;
          &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
              &lt;DesktopDatePicker
                  label=&quot;Date&quot;
                  value={date}
                  onChange={(e) =&gt; {console.log(&quot;eee&quot;,e);setDate(e)}}
                  inputFormat=&quot;dd/MM/yyyy&quot;
                  renderInput={(params) =&gt; &lt;TextField sx={{ width: &quot;50%&quot;, margin: &quot;1%&quot; }}{...params} /&gt;}
              /&gt;
          &lt;/LocalizationProvider&gt;
          &lt;Button sx={{marginLeft: 3}} variant=&quot;contained&quot; onClick={() =&gt; changeDate(&quot;right&quot;)}&gt;
              {&quot;&gt;&quot;}
          &lt;/Button&gt;
      &lt;/Box&gt;
    );
  }
  
  </code></pre>