Formik on submit not called with Nextjs13 - node.js

Question

i created a form in nextjs13 using Formik, Material UI and Yup, but upon click the submit buttom the form get append to the url as queries and the onSubmit button is never called.
i already have use client at the top of my page, yet the validation and onsubmit is not working
below is my form, i cant realy figure out what am doing wrongly
<Formik
validationSchema={validationSchame}
initialValues={{
username: "",
password: "",
}}
onSubmit={async (values, formikHelpers) => {
console.log(values);
}}
>
{({ errors }) => {
return (
<Form>
<Grid item sx={{ marginBottom: 1 }}>
<Field
sx={{ width: "300px" }}
name="username"
as={StyledRedditTextField}
placeholder="Username"
label="Username"
size="medium"
/>
</Grid>
<Grid item>
<Field
sx={{ width: "300px", marginBottom: 2 }}
name="password"
as={StyledRedditTextField}
placeholder="Password"
label="Password"
size="medium"
type="password"
/>
</Grid>
<Grid item>
<Button
type="submit"
variant="contained"
color="primary"
sx={{ width: "300px" }}
size="large"
>
Sign In
</Button>
</Grid>
</Form>
);
}}
</Formik>