title: Return the value of React-Select using React-Hook-Form with Typescript
body: <p>I am using <strong>react-hook-form</strong> controller with <strong>react-select</strong>. I am using React with <strong>Typescript</strong>. I can get the value of selected when submit, but it returns the both value and label from options array as an object.How can I return value only?
  here is the code,</p>
  <pre><code>const { handleSubmit, control, formState:{errors}} = useForm&lt;IAddProductForm&gt;();
  
  const handleOnSubmit = (data:IAddProductForm) =&gt; {
          console.log(data);
      }
  
  const categoryOptions = [
          {value:&quot;Grocery&quot;, label:&quot;Grocery&quot;},
          {value:&quot;Pharmacy&quot;, label:&quot;Pharmacy&quot;},
          {value:&quot;Electronic&quot;, label:&quot;Electronic&quot;},
          {value:&quot;Food&quot;, label:&quot;Food&quot;},
      ];
  
  return(
          &lt;React.Fragment&gt;
             &lt;Form onSubmit={handleSubmit(handleOnSubmit)}&gt;
                 &lt;Controller
                     control={control}
                     render={({field:{onChange, value, name, ref}}) =&gt; (
                          &lt;Select
                             inputRef={ref}
                             value={categoryOptions.find(c =&gt; c.value === value)}
                             options={categoryOptions}
                             onChange={onChange}
                          /&gt;
                     )}
                     name={&quot;category&quot;}
                  /&gt;
                 &lt;Button type={&quot;submit&quot;}&gt;submit&lt;/Button&gt;
              &lt;/Form&gt;
          &lt;/React.Fragment&gt;
  );
  </code></pre>
  <p>this code returns <code>category: {value: &quot;Grocery&quot;, label: &quot;Grocery&quot;}</code> this if I select Grocery and submit it. but I need to return <code>category:&quot;Grocery&quot;</code> like this.</p>