Let's create an AddEdit with same component

import React, { useEffect, useState } from 'react'import { Formik, Form } from 'formik'import { useMutation, useQuery, useQueryClient } from 'react-query'const AddEdit = () => {  const history = useHistory()  const user = useUser()  const params: any = useParams()  const queryClient = useQueryClient()  const id: number = Number(params?.id)  const isAddMode = !id  const { data, isLoading, isError } = useQuery(['data', id], () => getData(id), {    enabled: !!id,  })  const onFormSubmit = (values: any) => {    isAddMode ? addFnc : editFnc  }  const initValues = {    name: isAddMode ? '' : data?.name  }  return (    <>      <div className=''>        <Formik validationSchema={Schema} initialValues= {initValues} onSubmit={onFormSubmit}>          {(props) => (            <Form className='w-100 pb-10'>              <Field name="name" />              <button                type='submit'>                  'Submit'              </button>            </Form>          )}        </Formik>      </div>    </>  )}export default AddEdit