How do i get rid of network error when creating a form

This is my formik configuration... Apparently i guess it is reading a value that is undefined.. Please any suggestions?



import * as React from 'react';
import { FormikConfig, FormikErrors, FormikState, FormikTouched, FormikValues, FieldMetaProps, FieldHelperProps, FieldInputProps } from './types';
export declare function useFormik<Values extends FormikValues = FormikValues>({ validateOnChange, validateOnBlur, validateOnMount, isInitialValid, enableReinitialize, onSubmit, ...rest }: FormikConfig<Values>): {
    initialValues: Values;
    initialErrors: FormikErrors<unknown>;
    initialTouched: FormikTouched<unknown>;
    initialStatus: any;
    handleBlur: {
        (e: React.FocusEvent<any>): void;
        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
    };
    handleChange: {
        (e: React.ChangeEvent<any>): void;
        <T_1 = string | React.ChangeEvent<any>>(field: T_1): T_1 extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
    };
    handleReset: (e: any) => void;
    handleSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void;
    resetForm: (nextState?: Partial<FormikState<Values>> | undefined) => void;
    setErrors: (errors: FormikErrors<Values>) => void;
    setFormikState: (stateOrCb: FormikState<Values> | ((state: FormikState<Values>) => FormikState<Values>)) => void;
    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldError: (field: string, value: string | undefined) => void;
    setStatus: (status: any) => void;
    setSubmitting: (isSubmitting: boolean) => void;
    setTouched: (touched: FormikTouched<Values>, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
    setValues: (values: React.SetStateAction<Values>, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
    submitForm: () => Promise<any>;
    validateForm: (values?: Values) => Promise<FormikErrors<Values>>;
    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
    isValid: boolean;
    dirty: boolean;
    unregisterField: (name: string) => void;
    registerField: (name: string, { validate }: any) => void;
    getFieldProps: (nameOrOptions: any) => FieldInputProps<any>;
    getFieldMeta: (name: string) => FieldMetaProps<any>;
    getFieldHelpers: (name: string) => FieldHelperProps<any>;
    validateOnBlur: boolean;
    validateOnChange: boolean;
    validateOnMount: boolean;
    values: Values;
    errors: FormikErrors<Values>;
    touched: FormikTouched<Values>;
    isSubmitting: boolean;
    isValidating: boolean;
    status?: any;
    submitCount: number;
};
export declare function Formik<Values extends FormikValues = FormikValues, ExtraProps = {}>(props: FormikConfig<Values> & ExtraProps): JSX.Element;
/**
 * Transform Yup ValidationError to a more usable object
 */
export declare function yupToFormErrors<Values>(yupError: any): FormikErrors<Values>;
/**
 * Validate a yup schema.
 */
export declare function validateYupSchema<T extends FormikValues>(values: T, schema: any, sync?: boolean, context?: any): Promise<Partial<T>>;
/**
 * Recursively prepare values.
 */
export declare function prepareDataForValidation<T extends FormikValues>(values: T): FormikValues;

import React, { useEffect } from "react";
import SpringModal from "../../components/Modal/Modal";
import { StyledWithdraw } from "./StyledWithdraw";
import Inputs from "../../components/inputs/Inputs";
import { Form, Formik } from "formik";
import Button from "../../components/Button/Button";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";


const initialValues = {
  paymentmethod: "",
  account: "",
  
  amount: "",
};
const Witdraw = () => {
  const token = localStorage.getItem("user");
  const onSubmit = async (values) => {
    console.log(values);
    try {
      axios
        .post(
          "http://localhost:8660/v1/auth/add/withdraw",
          {
            ...values,
          },
          {
            headers: {
              authorization: `${token}`,
            },
          }
        )
        .then((response) => {
          if (response.status === 200) {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } catch (error) {}
  };

  return (
    <StyledWithdraw>
      <div className="wit_top">
        <p>Request Withdrawal</p>
      </div>
      <div className="wit_bal my-4">
        <div className="av_bal">
          <p>Available Balance</p>
        </div>
        <div className="av_bal">
          <p>$0.00</p>
        </div>
      </div>
      <div className="wit_bal my-4">
        <div className="av_bal py-3">
          <p>Withdrawal</p>
        </div>
        <div className="av_bal">
          <p>$0.00</p>
        </div>
      </div>
      <div className=" container grid grid-cols-2 py-12 gap-6">
        <SpringModal imageUrl={bitcoin} details="Bitcoin (Recommended)">
          <div className="flex justify-center">
            <img src={bitcoin} alt="" className="pay_logo w-20 h-20 " />
          </div>
          <Formik initialValues={initialValues} onSubmit={onSubmit}>
            <Form>
              <Inputs
                value="bitcoin"
                label={""}
                type={"hidden"}
                name={"paymentamount"}
                id={"paymentamount"}
              />
              <div className="mt-4">
                <div className="">
                  <Inputs
                    label={"Input Amount"}
                    type={"number"}
                    name={"amount"}
                    id={"amount"}
                  />
                </div>
              </div>
              <div className="mt-4">
                <div className="">
                  <Inputs
                    label={"Wallet Address"}
                    type={"text"}
                    name={"account"}
                    id={"account"}
                  />
                </div>
              </div>
              <div className="reg_btn flex justify-center mt-8">
                <button
                  type="submit"
                  className="btn"
                  style={{
                    backgroundColor: "#252525",
                    border: "2px solid #F86520",
                    color: "white",
                    padding: "0.7rem 2.3rem",
                    borderRadius: "20px",
                  }}
                >
                  Proceed{" "}
                </button>
              </div>
            </Form>
          </Formik>
        </SpringModal>
      </div>
    </StyledWithdraw>
  );
};

export default Witdraw;