title: Modal implemented with react-hook-form throws error related to refs
body: <p>Having the following component:</p>
  <pre><code>import { useToggle } from '../shared/hooks';
  import { Modal, SelectInput, Textarea, Footer, Button } from '../shared/ui-components';
  
  export function MainComponent() {
    const [isOpened, toggleModal] = useToggle(false);
    const options = [
      { id: '0', name: 'Test' },
      { id: '1', name: 'Test 2' }
    ];
  
    return (
      &lt;div&gt;
        &lt;Button onClick={toggleModal} /&gt;
        &lt;Modal
          title='modal title'
          open={isOpened}
          onClose={toggleModal}
          footer={&lt;Footer onSubmit={toggleModal} onCancel={toggleModal} editMode={true} /&gt;}
        &gt;
          &lt;div&gt;
            &lt;SelectInput label='name' initialSelectedOption={options[0]} options={options} /&gt;
            &lt;Textarea label='description' /&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  export default MainComponent;
  </code></pre>
  <p>How it is now, it opens a modal when the button is clicked, you can select a value from a dropdown (SelectInput) and write some input text (Textarea). <code>onSubmit</code> just closes the modal for the moment.</p>
  <p>What I want to do, <code>with react-hook-form</code> is to be able to store those values, of the selected dropdown and input inside textarea.</p>
  <p>So there was imported useForm, yup for validating the data, for <code>onSubmit</code> it was added <code>onSubmit={handleSubmit(onSubmit)}</code>.</p>
  <p>Here is the code after adding those:</p>
  <pre><code>import { yupResolver } from '@hookform/resolvers/yup'; // added 
  import { useForm } from 'react-hook-form';
  import * as yup from 'yup'; // added  
  
  import { useToggle } from '@oam/shared/hooks';
  import { Modal, SelectInput, Textarea, Footer } from '@oam/shared/ui-components';
  
  const schema = yup.object().shape({ // added schema
    name: yup.string().required(),
    description: yup.string().required()
  });
  
  export function MainComponent() {
    const [isOpened, toggleModal] = useToggle(false);
    const options = [
      { id: '0', name: 'Test' },
      { id: '1', name: 'Test 2' }
    ];
  
    const { handleSubmit, register } = useForm({ // added useForm
      resolver: yupResolver(schema)
    });
  
    const onSubmit = (data: unknown) =&gt; { // added onSubmit that should log the content
      console.log('data: ', data);
      toggleModal();
    };
  
    return (
      &lt;div&gt;
        &lt;Modal
          title='modal title'
          open={isOpened}
          onClose={toggleModal}
          // added below onSubmit
          footer={&lt;Footer onSubmit={handleSubmit(onSubmit)} onCancel={toggleModal} editMode={true} /&gt;}
        &gt;
          &lt;div&gt;
            &lt;SelectInput
              label='name'
              initialSelectedOption={options[0]}
              options={options}
              {...register('name')} // added register here 
            /&gt;
            // added register also here
            &lt;Textarea label='description' {...register('description')} /&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  export default MainComponent;
  </code></pre>
  <p>But when I open the modal, this error appears in console:</p>
  <blockquote>
  <p>react_devtools_backend.js:4045 Warning: Function components cannot be
  given refs. Attempts to access this ref will fail. Did you mean to use
  React.forwardRef()?</p>
  <p>Check the render method of <code>MainComponent</code>.
  at Textarea (http://localhost:4200/main.js:47767:5)
  at div
  at div
  at div
  at div
  at div
  at OpenClosedProvider (http://localhost:4200/vendor.js:4813:20)
  at TransitionChild (http://localhost:4200/vendor.js:3713:27)
  at Child (http://localhost:4200/vendor.js:3897:79)
  at div
  at div
  at DescriptionProvider (http://localhost:4200/vendor.js:145:72)
  at ForcePortalRoot (http://localhost:4200/vendor.js:4847:18)
  at Group (http://localhost:4200/vendor.js:2563:22)
  at Portal (http://localhost:4200/vendor.js:2527:16)
  at ForcePortalRoot (http://localhost:4200/vendor.js:4847:18)
  at StackProvider (http://localhost:4200/vendor.js:4888:23)
  at Dialog (http://localhost:4200/vendor.js:289:20)
  at OpenClosedProvider (http://localhost:4200/vendor.js:4813:20)
  at TransitionChild (http://localhost:4200/vendor.js:3713:27)
  at Transition (http://localhost:4200/vendor.js:3838:20)
  at Modal (http://localhost:4200/main.js:45752:5)
  at div
  at div
  at CalculationEngine (http://localhost:4200/main.js:6618:69)
  at I18nextProvider (http://localhost:4200/vendor.js:119005:19)
  at CalculationEngineContainer
  at Route (http://localhost:4200/vendor.js:127414:29)
  at Suspense
  at main
  at div
  at App (http://localhost:4200/main.js:148:75)
  at Router (http://localhost:4200/vendor.js:127043:30)
  at BrowserRouter (http://localhost:4200/vendor.js:126650:35)
  at QueryClientProvider (http://localhost:4200/vendor.js:125219:21) overrideMethod @ react_devtools_backend.js:4045 printWarning @
  vendor.js:90934 error @ vendor.js:90910 validateFunctionComponentInDev
  @ vendor.js:108793 mountIndeterminateComponent @ vendor.js:108760
  beginWork @ vendor.js:109916 beginWork$1 @ vendor.js:114802
  performUnitOfWork @ vendor.js:113638 workLoopSync @ vendor.js:113569
  renderRootSync @ vendor.js:113532 performSyncWorkOnRoot @
  vendor.js:113155 (anonymous) @ vendor.js:102194
  unstable_runWithPriority @ vendor.js:137947 runWithPriority$1 @
  vendor.js:102143 flushSyncCallbackQueueImpl @ vendor.js:102189
  flushSyncCallbackQueue @ vendor.js:102176 flushPassiveEffectsImpl @
  vendor.js:114482 unstable_runWithPriority @ vendor.js:137947
  runWithPriority$1 @ vendor.js:102143 flushPassiveEffects @
  vendor.js:114309 (anonymous) @ vendor.js:114186 workLoop @
  vendor.js:137896 flushWork @ vendor.js:137869 performWorkUntilDeadline
  @ vendor.js:137636</p>
  </blockquote>
  <p>Any ideas how to fix this?</p>