title: can't repeat an hexadecimal html entity in react jsx value props
body: <p>So my question is why does this work and displays dots : </p>
  
  <pre><code>&lt;Field label="Password" value="&amp;#x2022;&amp;#x2022;&amp;#x2022;&amp;#x2022;&amp;#x2022;" type="password" /&gt;
  </code></pre>
  
  <p>And the above just displays the plain hexa code ! </p>
  
  <pre><code>&lt;Field label="Password" value={`${'&amp;#x2022;'.repeat(10)}`} type="password" /&gt;
  </code></pre>
  
  <p>My Field component : </p>
  
  <pre><code>function renderValueByType(value: string, type: string) {
    switch (type) {
      case 'phone':
        return phoneFormatter(value);
  
      default:
        return value;
    }
  }
  
  /**
   * 
   * @param {*} param0 
   */
  const Field = ({ label, value, type, className }: PropTypes) =&gt; (
    &lt;div className={className}&gt;
      &lt;span className="Field__label"&gt;{label}&lt;/span&gt;
      &lt;span className="Field__content"&gt;{renderValueByType(value, type)}&lt;/span&gt;
    &lt;/div&gt;
  );
  </code></pre>