title: CoreUI + React Hook Form
body: <p><em><strong><code>index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</code></strong></em></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import {
    CCard,
    CCardBody,
    CCardHeader,
    CCol,
    CRow,
    CForm,
    CFormGroup,
    CInput,
    CLabel,
    CValidFeedback,
    CInvalidFeedback,
    CSelect,
    CInputFile,
    CButton,
    CCardFooter
  } from '@coreui/react';
  import CIcon from '@coreui/icons-react';
  import { useForm } from 'react-hook-form';
  
  const defaultValues = {
    firstName: '',
    lastName: '',
    studentBadgeID: '',
    gender: '',
    dateOfBirth: '',
    class: '',
    religion: '',
    joiningDate: '',
    phone: '',
    admissionNumber: '',
    email: '',
    parentName: '',
    parentAddress: '',
    parentPhone: '',
    parentEmail: ''
  };
  
  const AddStudents = () =&gt; {
    const { register, handleSubmit, errors } = useForm(defaultValues);
    const onSubmit = data =&gt; console.log(data);
  
    return (
      &lt;CCol xs=&quot;12&quot;&gt;
        &lt;CCard&gt;
          &lt;CForm onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;CCardHeader&gt;Add Student&lt;/CCardHeader&gt;
            &lt;CCardBody&gt;
              &lt;h4&gt;Student Information&lt;/h4&gt;
              &lt;CRow className=&quot;my-0&quot;&gt;
                &lt;CCol lg=&quot;6&quot; sm=&quot;12&quot;&gt;
                  &lt;CLabel htmlFor=&quot;firstName&quot;&gt;First Name&lt;/CLabel&gt;
                  &lt;CInput
                    className=&quot;form-control-success&quot;
                    id=&quot;firstName&quot;
                    name=&quot;firstName&quot;
                    ref={register({ required: true })}
                  /&gt;
                  &lt;CInvalidFeedback className=&quot;help-block&quot;&gt;
                    Please provide a valid information
                  &lt;/CInvalidFeedback&gt;
                  &lt;CValidFeedback className=&quot;help-block&quot;&gt;
                    Input provided
                  &lt;/CValidFeedback&gt;
                &lt;/CCol&gt;
              &lt;/CRow&gt;
            &lt;/CCardBody&gt;
            &lt;CCardFooter&gt;
              &lt;CButton type=&quot;submit&quot; size=&quot;sm&quot; color=&quot;primary&quot; className=&quot;mr-1&quot;&gt;
                &lt;CIcon name=&quot;cil-scrubber&quot; /&gt; Submit
              &lt;/CButton&gt;
              &lt;CButton type=&quot;reset&quot; size=&quot;sm&quot; color=&quot;danger&quot;&gt;
                &lt;CIcon name=&quot;cil-ban&quot; /&gt; Reset
              &lt;/CButton&gt;
            &lt;/CCardFooter&gt;
          &lt;/CForm&gt;
        &lt;/CCard&gt;
      &lt;/CCol&gt;
    );
  };
  
  export default AddStudents;
  </code></pre>