title: 'FieldArray' cannot be used as a JSX component
body: <p>In my next.js project, I have used Formik  component. But it shows a type error, which is &quot;'FieldArray' cannot be used as a JSX component. &quot; How can I fix it?</p>
  <p>The Error is</p>
  <pre><code> 'FieldArray' cannot be used as a JSX component.
    Its element type 'ReactElement&lt;any, any&gt; | Component&lt;FieldArrayConfig, any, any&gt; | null' is not a valid JSX element.
      Type 'Component&lt;FieldArrayConfig, any, any&gt;' is not assignable to type 'Element | ElementClass | null'.
        Type 'Component&lt;FieldArrayConfig, any, any&gt;' is not assignable to type 'ElementClass'.
          The types returned by 'render()' are incompatible between these types.
            Type 'React.ReactNode' is not assignable to type 'import(&quot;/home/shoyon/WorkPlace/Practice/EmailSystem/view/node_modules/@types/react-transition-group/node_modules/@types/react/index&quot;).ReactNode'.
              Type '{}' is not assignable to type 'ReactNode'.ts(2786)
  </code></pre>
  <p>My code is:</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>import React, { useEffect, useState } from 'react'
  import AttachmentForm from '@components/Forms/AttachmentForm'
  import { ProjectActionType } from '@enums/enums'
  import { Button, Divider, Grid, Link, Typography } from '@mui/material'
  import { Notify } from '@utils/common'
  import { FormikTextField, MultiValueInput } from '@utils/FormElements'
  import { FieldArray, Form, Formik, FormikProps } from 'formik'
  import * as Yup from 'yup'
  import { useRouter } from 'next/router'
  import { createTemplate, getTemplateById } from 'requests/templates'
  
  interface pageProps {
      type: ProjectActionType
  }
  
  interface AttachmentValues {
      attachmentName: any;
      attachmentData: string;
  }
  
  interface FieldValues {
      projectId: number | null;
      title: string;
      cc?: string;
      bcc?: string
      templateName?: string;
      templateData?: string
      attachment?: AttachmentValues[] | [] | null;
  }
  
  const SingleTemplate = ({ type }: pageProps) =&gt; {
      const router = useRouter();
      
      const [data, setData] = useState&lt;FieldValues&gt;({
          projectId: null,
          title: '',
          templateName:'',
          templateData: '',
          cc: '',
          bcc: '',
          attachment: []
      });
  
      const validationSchema = Yup.object().shape({
          projectId: Yup.number().required('Field required'),
          title: Yup.string().required('Field required'),
          templateName: type === ProjectActionType.ADD ? Yup.mixed().required('File is required') : Yup.mixed(),
          templateData: Yup.string().required('Field required'),
          cc: Yup.string(),
          bcc: Yup.string(),
          attachment: Yup.array().of(
              Yup.object().shape({
                  attachmentName: Yup.mixed().required('File is required'),
                  attachmentData: type === ProjectActionType.ADD ? Yup.mixed().required('Data is required') : Yup.mixed(),
              })
          )
      });
  
      const getTemplateData = async (id: number)=&gt; {
          let res = await getTemplateById(id);
          if (res?.statusCode === 200) setData({
              ...data,
              title: res.data.title,
              templateName: res.data.templateName,
              templateData: JSON.stringify(res.data.templateData),
              cc: res.data.cc,
              bcc: res.data.bcc,
              attachment: res.data.attachment
          });
          else Notify(res?.message, 'error');
      }
  
      const handleSubmit = async (values: FieldValues, setSubmitting: any) =&gt; {
          let res = await createTemplate(values);
          if (res?.statusCode === 201) Notify('Template added', 'success');
          else Notify(res?.message, 'error');
          setSubmitting(false);
      }
  
      useEffect(()=&gt;{
          if(router.query.id) {
              const id = parseInt(router.query.id as string, 10);
              setData({...data, projectId: id});
              if(type === ProjectActionType.EDIT) getTemplateData(id);
          }
      // eslint-disable-next-line react-hooks/exhaustive-deps
      },[router])
      
  
      return (
          &lt;React.Fragment&gt;
              &lt;Typography variant='h5' mb={4}&gt;Email Settings&lt;/Typography&gt;
              &lt;Formik 
                  enableReinitialize={true}
                  initialValues={data}
                  validationSchema={validationSchema} 
                  onSubmit={(values, { setSubmitting }) =&gt; {
                      handleSubmit(values, setSubmitting);
                  }}
              &gt;
                  {(props: FormikProps&lt;any&gt;) =&gt; {
                      const { values, touched, errors, handleBlur, handleChange, isSubmitting } = props
                      return (
                          &lt;Form noValidate autoComplete="off"&gt;
                              ...
  
                              &lt;Divider className='mb-6' /&gt;
                              &lt;FieldArray name="attachment"
                                  render={arrayHelpers =&gt; (
                                      &lt;React.Fragment&gt;
                                          {values.attachment &amp;&amp; values.attachment.map((key: any, i: number) =&gt; (
                                              &lt;AttachmentForm key={i}
                                                  index={i}
                                                  id={key}
                                                  onDelete={() =&gt; arrayHelpers.remove(i)}
                                                  values={values}
                                                  touched={touched}
                                                  errors={errors}
                                                  handleBlur={handleBlur}
                                                  handleChange={handleChange}
                                              /&gt;
                                          ))}
                                          &lt;div className="flex"&gt;
                                              &lt;Button variant="contained" color='info' className='mr-3' type='submit' disabled={isSubmitting}&gt;Save&lt;/Button&gt;
                                              &lt;Button variant="contained" onClick={() =&gt; arrayHelpers.push({ attachmentName: '', attachmentData: '' })}&gt;
                                                  Add Attachment
                                              &lt;/Button&gt;
                                          &lt;/div&gt;
                                      &lt;/React.Fragment&gt;
                                  )}
                              /&gt;
                          &lt;/Form&gt;
                      )
                  }}
              &lt;/Formik&gt;
          &lt;/React.Fragment&gt;
      )
  }
  
  export default SingleTemplate</code></pre>
  </div>
  </div>
  </p>