canvas element is missing on submission

[DewangS]

I've a canvas HTML element which I contains an image and a text. When I submit the Formik form, I can't find that element in the values list or to say it is empty\null.

const initialValues = { card: null}

const handleSubmit = (initialValues, { e, setSubmitting }) => {
    setSubmitting(true);
    //below console log shows card as null i.e. as initialized 
    console.log("initialValues : ", initialValues);
}

<Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
        //enableReinitialize
      >
        {({
          submitForm,
          handleBlur,
          handleChange,
          isSubmitting,
          isValid,
          dirty,
          touched,
          values,
          errors,
        }) => (
          <Form>
            <div>

               <canvas
                          id="card"
                          name="card"
                          ref={canvasRef}
                          width="100"
                          height="100"
                          sx={{ border: "1px solid black" }}
                        >
            </canvas>
 </Form>
        )}
      </Formik>
    </div>
  );