title: Error: Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'
body: <p>I am trying to use <code>Formik</code> in my react application. I have the login component written in ts. For some reason, the <code>Form</code> element inside <code>Formik</code> throws the following error:</p>
  
  <blockquote>
    <p>Error TS2559  (TS) Type '{ children: Element[]; }' has no properties in
    common with type 'IntrinsicAttributes &amp;
    RefAttributes'.</p>
  </blockquote>
  
  <p>I wonder how I can mitigate this problem. Any solutions?</p>
  
  <pre><code> &lt;div&gt;
              &lt;Form&gt;&lt;/Form&gt; // NO ERROR
              &lt;h4&gt;Login&lt;/h4&gt;
              &lt;Formik
                  initialValues={{
                      username: '',
                      password: ''
                  }}
                  validationSchema={Yup.object().shape({
                      username: Yup.string().required('Username is required'),
                      password: Yup.string().required('Password is required')
                  })}
                  onSubmit={({ username, password }, { setStatus, setSubmitting }) =&gt; {
                      setStatus();
                      authenticationService.login(username, password)
                          .then(
                              result =&gt; {
                                  console.log(result);
                                  console.log(typeof result);
  
                                  if (result.status == '500') {
                                      setSubmitting(false);
                                      setStatus("Login failed.");
  
                                  } else if (result.status == '200') {
                                      if (result.data["roles"].result.includes('Admin'))
                                          history.push('/admin/courses');
  
                                      history.push('/courses');
                                  }
                              },
                              error =&gt; {
                                  setSubmitting(false);
                                  setStatus(error);
                              }
                          );
                  }}
                  render={({ errors, status, touched, isSubmitting }) =&gt; (
                      &lt;Form&gt; // ERROR!!!
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="username"&gt;Username&lt;/label&gt;
                              &lt;Field name="username" type="text" className={'form-control' + (errors.username &amp;&amp; touched.username ? ' is-invalid' : '')} /&gt;
                              &lt;ErrorMessage name="username" component="div" className="invalid-feedback" /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                              &lt;Field name="password" type="password" className={'form-control' + (errors.password &amp;&amp; touched.password ? ' is-invalid' : '')} /&gt;
                              &lt;ErrorMessage name="password" component="div" className="invalid-feedback" /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;button type="submit" className="btn btn-primary" disabled={isSubmitting}&gt;Login&lt;/button&gt;
                              {isSubmitting &amp;&amp; &lt;LoadingSpinner /&gt;}
                          &lt;/div&gt;
                          {
                              status &amp;&amp;
                              &lt;div className={'alert alert-danger'}&gt;Login failed.&lt;/div&gt;
                          }
                      &lt;/Form&gt;
                  )}
              /&gt;
  
              /&gt;
  
          &lt;/div&gt;
  </code></pre>