React hook form + material UI + Yup validation submit not working - reactjs

Question

Hi I am trying to combine React hook form, material UI, Yup validation but I just cant make it work, RHF and MUI works together but not with yup and RHF and YUP works but not with MUI.
anyway here is my work until now the only thing that is not working is that, the handleSubmit never fires and when I type something it gives me a uncontrolled error
import axios from "axios";
import styles from "../../styles/RegisterPage.module.css";
import TextField from "#mui/material/TextField";
import { Container } from "#mui/material";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object({
age: yup
.number()
.positive()
.integer()
.typeError("Amount must be a number")
.required(),
});
const MedicalHistoryPage = () => {
const {
handleSubmit,
control,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
const onSubmit = (data)=>{
console.log(data)
}
return (
<>
<Container maxWidth="md" className={styles.container}>
<form
onSubmit={handleSubmit(onSubmit)}
>
<div className={styles.title}>Ενημέρωσε το ιατρικό ιστορικό σου</div>
<div className={styles.form}>
<div className={styles.formsContainer}>
<div className={styles.input}>
<Controller
control={control}
name="age"
render={({ field }) => (
<TextField
{...field}
fullWidth
type="Number"
label="Input your age"
variant="outlined"
defaultValue=""
helperText={errors.age?.message}
error={!!errors.age?.message}
/>
)}
/>
</div>
</div>
<div className={styles.buttonsContainer}>
<div className={styles.loginButton}>
<input type="submit" className={styles.buttonStyle} />
</div>
</div>
</div>
</form>
</Container>
</>
);
};
export default MedicalHistoryPage;
Thanks for your time