Why dynamic values are not being submitted from form with NextJS?

I'm working on React based on NextJS code.

If I manually enter values in form fields and submit the form, I get all the values in the component function.

But if I dynamically display values in a form field like value={query.campaignid}, the component does not collect any value.

import { Button, Input } from "@chakra-ui/react";
import { Field, Form, Formik } from "formik";

import { useRouter } from "next/router";

export default function FormikExample() {
  const { query } = useRouter();

  return (
    <>
      <Formik
        initialValues={
          {
            // campaignid: " ",
          }
        }
        onSubmit={(values) => {
          setTimeout(() => {
            console.log(values);
          });
        }}
      >
        {(props) => (
          <Form>
            <Field name="campaignid">
              <Input value={query.campaignid} />
            </Field>

            <Button id="submited" isLoading={props.isSubmitting} type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </>
  );
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/1BLizxI