title: Condtional readOnly checkbox still editable
body: <p>I have a table of checkboxes (true/false values), <code>initialValues</code> are populated from an api call. Each "facility" has a <code>Enabled</code> and <code>Immutable</code> value. If <code>Immutable</code> is true the <code>Enabled</code> checkbox should be checked AND <code>readOnly</code>, meaning it can't be unchecked. So if <code>Immutable</code> is <code>false</code>, the <code>Enabled</code> checkbox should be editable.</p>
  
  <p>I'm using the following snippet to render the above scenario </p>
  
  <pre><code>&lt;Table.Cell&gt;
    {JSON.stringify(enabled) === "true" &amp;&amp;
    `facilities[${index}].immutable` ===
      "true" ? (
      &lt;Field
        type="checkbox"
        name={`facilities[${index}].enabled`}
        readOnly
      /&gt;
    ) : (
      &lt;&gt;
       &lt;Field
         type="checkbox"
         name={`facilities[${index}].enabled`}
       /&gt;
      &lt;/&gt;
   )}
  &lt;/Table.Cell&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/logging-table-l2rut" rel="nofollow noreferrer">I have a codesandbox here</a>. You can see the values updated by checking/unchecking the boxes in the debug state below the table in the sandbox.</p>
  
  <p>It seems like the condition is always false and rendering the non <code>readOnly</code> <code>&lt;Field /&gt;</code></p>