How to use the formik.useFormik function in formik

const FetchQuestionsModal = ({ course }) => {
    const [isFetching, setIsFetching] = useState(true);
    const [isLoading, setIsLoading] = useState(true);
    const [forms, setForms] = useState([]);
    const newToast = useContext(ToastContext);

    const formik = useFormik({
        initialValues: { idForm: -1, questions: [] },
        validate: (values) => { return (values.questions.length == 0 ? { questions: "Empty" } : {}) },
        onSubmit: (values, { setSubmitting }) => {
            Promise.all(values.questions.map((question: Question) => {
                question.id = undefined;
                question.form = course.form;
                console.log(question.id);
                return (
                    api.courses.forms.questions
                        .save(question)
                        .then((question) => {
                            newToast({
                                message: `Could not insert question ${question.label}`,
                                level: ToastLevel.Success,
                            });
                        })

const CreateFilterDialog = ({
  filter,
  onCreate,
  open,
  onCancel,
}: Props): JSX.Element => {
  const { toFilter, toRawFilter } = useAdapters();

  const { t } = useTranslation();

  const { sendRequest, sending } = useRequest({
    request: createFilter,
  });

  const form = useFormik({
    initialValues: {
      name: '',
    },
    validationSchema: Yup.object().shape({
      name: Yup.string().required(labelRequired),
    }),
    onSubmit: (values) => {
      sendRequest(
        omit(
          ['id'],
          toRawFilter({
            id: '',
            name: values.name,
            criterias: filter.criterias,
          }),
        ),

function EditApplicationDrawer({ onUpdated }) {
    const dispatch = useAppDispatch();

    const app = useAppSelector((state) =>
      state.updateApplication.targetId
        ? selectAppById(state.applications, state.updateApplication.targetId)
        : undefined
    );

    const formik = useFormik({
      initialValues: app
        ? {
            name: app.name,
            env: app.envId,
            kind: app.kind,
            pipedId: app.pipedId,
            repoPath: app.gitPath?.path || "",
            repo: app.gitPath?.repo || { id: "", remote: "", branch: "" },
            configFilename: app.gitPath?.configFilename || "",
            cloudProvider: app.cloudProvider,
          }
        : emptyFormValues,
      validateOnMount: true,
      validationSchema,
      enableReinitialize: true,
      async onSubmit(values) {

function ApplicationDescription({ description, onUpdate }) {
    const [editing, setEditing] = useState(false);
    const classes = useStyles();
    const formik = useFormik({
      initialValues: { description },
      async onSubmit({ description }) {
        await onUpdate(description);
        setEditing(false);
      },
    });

    if (editing) {
      return (
        <form>
          </form>

export const useForm = () => {
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues,
    onSubmit: async (values, formikHelper) => {
      const errorResponse = await dispatch(userOperations.create(values));
      if (!errorResponse) {
        dispatch(push("/"));
      } else {
        const formattedErrors = R.mapObjIndexed(
          R.join(", "),
          errorResponse.errors
        );
        formikHelper.setErrors(formattedErrors);
      }
    }
  });
  return formik;
};

const InterfaceDetailsView = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const urlParams = useParams()

  const { hostId } = location.state || {}

  if (hostId === undefined) {
    navigate(`/ui/hosts`)
  }

  const formik = useFormik({
    initialValues: {
      name: null,
      networkId: null,
      ipAddress: null,
      listenPort: null,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      networkId: Yup.string().nullable(),
      ipAddress: Yup.string().nullable(),
      listenPort: Yup.number()
        .positive()
        .nullable(),
    }),

const NewNetwork = () => {
  const navigate = useNavigate()
  const { success, error } = useToast()

  const formik = useFormik({
    initialValues: {
      name: '',
      addressRange: '',
    },
    validationSchema: Yup.object().shape({
      name: Yup.string().required().nullable(),
      addressRange: Yup.string().required().nullable(),
    }),
  })

  const [createNetwork, createNetworkMutation] = useMutation(CREATE_NETWORK, {
    variables: {},
    onCompleted: () => {
      success('Network created')
      navigate('/ui/networks/')
    },

const NewHostView = ({ networkId }) => {
  const navigate = useNavigate()

  const formik = useFormik({
    initialValues: {
      name: null,
      labels: [],
      advertiseAddress: null,
    },
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      advertiseAddress: Yup.string().nullable(),
    }),
  })

  const [createHost, createHostMutation] = useMutation(CREATE_HOST, {
    variables: { networkId },
    onCompleted: () => {

const TokensView = () => {
  const location = useLocation()

  const [token, setToken] = useState(undefined)
  const [tokenSecret, setTokenSecret] = useLocalStorage('drago.settings.acl.token', undefined)
  const [isAuthenticated, setAuthenticated] = useState(undefined)

  const formik = useFormik({
    initialValues: {
      secret: tokenSecret || '',
    },
    validationSchema: Yup.object().shape({
      secret: Yup.string(),
    }),
  })

  const handleGetSelfQueryCompleted = (data) => {
    if (data.result !== null) {
      setToken(data.result)
    }
  }

  const handleGetSelfQueryError = (errors) => {
    if (errors.networkError.statusCode === 404) {

showMessage({ message, severity: Severity.success });

  const { locale, timezone, username } = useUserContext();

  const {
    sendRequest: sendSetDowntimeOnResources,
    sending: sendingSetDowntingOnResources,
  } = useRequest({
    request: setDowntimeOnResources,
  });

  const currentDate = new Date();
  const twoHoursMs = 2 * 60 * 60 * 1000;
  const twoHoursLaterDate = new Date(currentDate.getTime() + twoHoursMs);

  const form = useFormik({
    initialValues: {
      dateStart: currentDate,
      timeStart: currentDate,
      dateEnd: twoHoursLaterDate,
      timeEnd: twoHoursLaterDate,
      fixed: true,
      duration: {
        value: 3600,
        unit: 'seconds',
      },
      comment: '',
      downtimeAttachedResources: true,
    },
    onSubmit: (values, { setSubmitting }) => {
      setSubmitting(true);