title: How do I change the state value of an interface property in React Typescript?
body: <p>I have an interface IRegister defined as such:</p>
  <pre><code>export default interface IRegister {
    email: string;
    password: string;
    name: string;
    phone: string;
    dob: Date;
  } 
  </code></pre>
  <p>And a <em>register</em> object in state as such:</p>
  <pre><code> const [register, setRegister] = useState&lt;IRegister&gt;({
      email: &quot;&quot;,
      password: &quot;&quot;,
      dob: new Date(),
      name: &quot;&quot;,
      phone: &quot;&quot;,
    });
  </code></pre>
  <p>The problem is that I'm unable to change the value of any of object <em>register</em>'s attributes. My current attempt is as follows (form using React Bootstrap) however it does not work:</p>
  <pre><code> &lt;Form&gt;
            &lt;Form.Group controlId=&quot;formBasicEmail&quot;&gt;
              &lt;Form.Label&gt;Email Address&lt;/Form.Label&gt;
              &lt;Form.Control
                type=&quot;email&quot;
                name=&quot;email&quot;
                value={register.email}
                onChange = {(e) =&gt; {setRegister(register.email)}}
                placeholder=&quot;Enter email&quot;
              /&gt;
            &lt;/Form.Group&gt;
          &lt;/Form&gt;
  </code></pre>
  <p>How would I go about changing the value of an interface property using form input?</p>