handleSubmit from formik is invoked whichever button I click

I want to implement a checking form for validity into the project for ordering food using formik but I have encountered some problems creating two buttons. Whichever button is clicked the handleSubmit is invoked. what can I do to solve this problem?

Function goBack only sets the state to false.

export default function Checkout(props) {
function handleSubmit(event) {
// event.preventDefault();
console.log("Hello");
}
return (
<Formik
initialValues={{ userName: "Hi", street: "", postalCode: "", city: "" }}
onSubmit={handleSubmit}
>
{(props) => (
<Form className={styles["form"]}>
<div className={styles["form-control"]}>
<div className={styles["form-control__input"]}>
<label htmlFor="userName">Your name</label>
<Field type="text" name="userName" id="userName"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="street">Street</label>
<Field type="text" name="street" id="street"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="postalCode">Postal code</label>
<Field type="text" name="postalCode" id="postalCode"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="city">City</label>
<Field type="text" name="city" id="city"></Field>
</div>
</div>
<div className={styles["form-actions"]}>
<CloseButton type="button" onClick={props.goBack}>Back</CloseButton>
<OrderButton type="submit">Confirm</OrderButton>
</div>
</Form>
)}
</Formik>
);
}

export default function CloseButton(props) {
return <button type={props.type} onClick={props.onClick} className={styles["close-button"]}>{props.children}</button>;
}

export default function OrderButton(props) {
return <button type={props.type} onClick={props.onClick} className={styles['order-button']}>{props.children}</button>
}

I wanted CloseButton to close the form and go back to the list of orders, but it only invokes handleSubmit created by Formik component instead of the function in the props. I have read the documentation but there is neither anything about creating formik with two buttons nor anything related to my problem.

Looks like in props.goBack you meant to reference the props for the component, but instead the props from within Formik are being used (as that is the closest block declaration of props). Since goBack is not defined on the Formik props, you're passing undefined as the onClick handler to the button.

The most straightforward way to fix this is to rename one of the props variables—I'd suggest naming the Formik ones to formikProps or something similar.

A better approach, in my opinion, would be to destructure the props (in both cases, though only one is necessary), like this:

export default function Checkout({ goBack }) {
// ...
return (
<Formik>
{(props) => (
// ...
<CloseButton type="button" onClick={goBack}>Back</CloseButton>
// ...
)}
</Formik>
)
}