title: How change the format of checkbox in react final form
body: <p>I implemented the form through react final form</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const products=  [
      { label: "T Shirt", value: "tshirt" },
      { label: "White Mug", value: "cup" },
      { label: "G-Shock", value: "watch" },
      { label: "Hawaiian Shorts", value: "shorts" },
    ];
  &lt;&gt;
  &lt;Form
    onSubmit={onSubmit}
    render={({ handleSubmit, pristine, invalid, values }) =&gt; (
      &lt;form onSubmit={handleSubmit} className="p-5"&gt;
        {products &amp;&amp;
          products.map((product, idx) =&gt; (
            &lt;div className="custom-control custom-checkbox" key={idx}&gt;
              &lt;Field
                name="state"
                component="input"
                type="checkbox"
                value={product.value}
              /&gt;
              &lt;label
                className="custom-control-label"
                htmlFor={`customCheck1-${product.value}`}
              &gt;
                {product.label}
              &lt;/label&gt;
            &lt;/div&gt;
          ))}
        &lt;button type="submit" disabled={pristine || invalid}&gt;
          Submit
        &lt;/button&gt;
        &lt;pre&gt;{JSON.stringify(values, 0, 2)}&lt;/pre&gt;
      &lt;/form&gt;
    )}
  /&gt;
  &lt;/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If I am selecting checkboxes the checked values are showing array of values like [tshirt,cup] but I need to show the array of objects like [ { label: &quot;T Shirt&quot;, value: &quot;tshirt&quot; }, { label: &quot;White Mug&quot;, value: &quot;cup&quot; }]
  I tried so many ways but I have not any luck. Please help me to out of this problem</p>