title: Cannot read properties of undefined (reading 'length') using reactjs
body: <p>When manually entering a name, the user can see a character counter letting the user know how many characters the user has typed so far, and when the user is approaching or reaches the limit of 20 characters. and if it reach the limit the textfield will shakey</p>
  <pre><code>  const CHARACTER_LIMIT = 20;
    const [values, setValues] = React.useState([]);
  
    const handleChange = (name) =&gt; (event) =&gt; {
      setValues({ ...values, [name]: event.target.value });
    };
  
    &lt;h1&gt;Text Field with character limit&lt;/h1&gt;
    &lt;TextField
      label=&quot;Limit&quot;
      inputProps={{
        maxlength: CHARACTER_LIMIT
      }}
      value={values.name}
      helperText={`{${values.name.length} === undefine ? 0 : ${values.name.length}}/${CHARACTER_LIMIT}`}
      onChange={handleChange(&quot;name&quot;)}
      margin=&quot;normal&quot;
      variant=&quot;outlined&quot;
    /&gt;
  </code></pre>