title: React hook not setting an objects state with async await. Always undefined
body: <p>Wrote an UpdateSOR function for a component called updateSOR which can be navigated from a previous page called SOR.</p>
  
  <p>UpdateSOR is a form which should be pre-filled from the api. So if user comes directly to this page or from the previous page, i do make an api call written below in useEffect and set the value of const [SOR] which would be used in the form to pre fill it as soon as the page loads.</p>
  
  <pre><code> export default function UpdateSOR(props) {
      const [SOR, setResult] = React.useState({}); // empty object
      useEffect(() =&gt; {
          const getSOR = async () =&gt; {
              console.log("Inside async");
  
              await QueryService.getSOR(props.match.params.sorID).then(
                (result) =&gt; {
                  console.log("Inside await then");
                  if (result.status === 200) {
                    setResult(result.data.data.dataItems); // set the value for SOR here 
                    console.log("result.data.data.dataItems" ,result.data.data.dataItems);
                  }
                }
              ).catch(error =&gt; {
                console.error(error);
              });
              getSOR();
  
            }
        }, []);
  
  
  console.log("Value of SOR" , SOR) // value of sor is empty object which was during initialization and SOR is not coming from the api written above in useEffect :(
  
   return (
  
      &lt;Container fluid={true} className="pt-4 pb-4 pl-0 pr-0"&gt;
          &lt;Row className={`align-items-center ${classes.header}`}&gt;
              &lt;Col lg="10"&gt;
                  &lt;h4 className="pl-4"&gt;Form SOR&lt;/h4&gt;
              &lt;/Col&gt;
              &lt;Col lg="1"&gt;
                  &lt;Button type="submit" variant="contained" color="primary" onClick={handleSave} className="mr-3 float-right"&gt;
                      Save
                      &lt;/Button&gt;
              &lt;/Col&gt;
              &lt;Col lg="1"&gt;
                  &lt;Button variant="contained" color="primary" onClick={handleCancel} className="mr-3 float-right"&gt;
                      Cancel
                      &lt;/Button&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;form className={`${classes.form} ${classes.body}`} noValidate autoComplete="off"&gt;
              &lt;Row&gt;
                  &lt;Col lg="2" onChange = {(event) =&gt; setSelectedSorName(event.target.value)}&gt;
                      &lt;CommonInput
                          id="sor_name"
                          label="SOR Name"
                          defaultValue={SOR.SOR_NAME}
                          disabled={false}
                          multiline={false}
                          rows="1" /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
  )
  </code></pre>
  
  <p>When i try to console.log the value of SOR, i dont get the values from api.
  Am i doing any error here. One possibility i think is i am not using async await properly. This is my queryService file from where i am calling this api in this updateSOR file</p>
  
  <pre><code>function getSOR(id) {
      if(id) {
          return axios.get(`${Constants.API_URL}/SOR?id=${id}`);
      } else {
          return axios.get(`${Constants.API_URL}/SOR`);
      }
  
  }
  </code></pre>