title: Datepicker returning time which I do not want to save
body: <p>I was trying a minimal app following this React example: <a href="https://www.freecodecamp.org/news/react-and-googlesheets/" rel="nofollow noreferrer">https://www.freecodecamp.org/news/react-and-googlesheets/</a></p>
  <p><strong>How to reproduce the problem?</strong>
  I created the project by following the two/three instructions at the above link. Which is:</p>
  <pre><code>npx create-react-app react-googlesheets
  </code></pre>
  <pre><code>npm install semantic-ui-react semantic-ui-css
  </code></pre>
  <p>Adding the following at <code>index.js</code></p>
  <pre><code>import 'semantic-ui-css/semantic.min.css'
  </code></pre>
  <pre><code>npm install axios
  </code></pre>
  <p>Then, I used the following at my App.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import { Button, Form, Container, Header } from 'semantic-ui-react';
  import axios from 'axios';
  import SemanticDatepicker from 'react-semantic-ui-datepickers'; //https://www.npmjs.com/package/react-semantic-ui-datepickers
  import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
  import TimePicker from 'react-time-picker'; //https://github.com/wojtekmaj/react-time-picker
  // import DateTimePicker from 'react-datetime-picker'; //https://www.npmjs.com/package/react-datetime-picker
  import './App.css';
  
  function App() {
      // const [currentDate,onChange]=useState(new Date());
      const [currentDate, setNewDate] = useState(new Date());
      const onChange = (event, data) =&gt; setNewDate(data.value);
      const [getTime,setTime]=useState('10:00');
  
      const [meter1, setM1] = useState('');
      const [meter2, setM2] = useState('');
      const [meter3, setM3] = useState('');
  
      console.log(currentDate);
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          const objt = { currentDate,getTime,meter1,meter2,meter3 };
  
          axios
              .post(
                  'https://sheet.best/api/sheets/xxx',
                  objt
              )
              .then((response) =&gt; {
                  console.log(response);
              });
      };
  
      return (
          &lt;Container fluid className=&quot;container&quot;&gt;
              &lt;Header as=&quot;h2&quot;&gt;Meter Reading Entry&lt;/Header&gt;
              &lt;Form className=&quot;form&quot;&gt;
                  &lt;Form.Field&gt;
                      &lt;label&gt;DateTime&lt;/label&gt;
                       {/* &lt;DateTimePicker 
                       onChange={currentDate} 
                       value={onChange} 
                       /&gt; */}
                      &lt;SemanticDatepicker 
                      onChange={onChange} 
                      value={currentDate} 
                      format=&quot;D/MMM/YY&quot;
                      /&gt;
                      &lt;TimePicker 
                      onChange={setTime} 
                      value={getTime}
                      /&gt;
                  &lt;/Form.Field&gt;
                  &lt;Form.Field&gt;
                      &lt;label&gt;Meter1&lt;/label&gt;
                      &lt;input
                          placeholder=&quot;Enter Meter1 reading&quot;
                          onChange={(e) =&gt; setM1(e.target.value)}
                      /&gt;
                  &lt;/Form.Field&gt;
                  &lt;Form.Field&gt;
                      &lt;label&gt;Meter2&lt;/label&gt;
                      &lt;input
                          placeholder=&quot;Enter Meter2 reading&quot;
                          onChange={(e) =&gt; setM2(e.target.value)}
                      /&gt;
                  &lt;/Form.Field&gt;
                  &lt;Form.Field&gt;
                      &lt;label&gt;Meter3&lt;/label&gt;
                      &lt;input
                          placeholder=&quot;Enter Meter3 reading&quot;
                          onChange={(e) =&gt; setM3(e.target.value)}
                      /&gt;
                  &lt;/Form.Field&gt;
  
                  &lt;Button color=&quot;blue&quot; type=&quot;submit&quot; onClick={handleSubmit}&gt;
                      Submit
                  &lt;/Button&gt;
              &lt;/Form&gt;
          &lt;/Container&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>I have used a Google Sheet and made it REST friendly through <a href="http://sheet.best" rel="nofollow noreferrer">http://sheet.best</a> the details are given at the first link above.</p>
  <p>What I am doing here is: an entry system for household meters saving with current/custom date and time.</p>
  <p>Now, my problem is when I save date they look gibberish like: <code>2021-05-03T18:00:00.000Z</code></p>
  <p>I have used formatter but that did not help. What am I doing wrong with the Date picker?</p>