Formik + Yup + Typescript, Binding element 'field' implicitly has an 'any' type.ts

below is my code with a screen shot of the error. The screen shot is for visual aid only. The code snippet that produces the error is right below it.

The error is TypeScript saying that the binding element has implicitly any type. I am not sure what type it is supposed to have. I am very new to TypeScript and I'd appreciate any clarification on the error and pointers to how to fix it.

I'd greatly appreciate any help. I've done some research but the ones I found related to this issue all marked as fixed a while ago yet here I am. It is probably me then

I am using Chakra UI

The code inspired by the Formik example as well as the example on Chakra UI docs

interface Values {
password: string;
email: string;
}
let formSchema = object().shape({
email: string().email().required("Email is required"),
password: string().required("Password is required"),
});
const Login: React.FC = () => {
return (
<Container
maxW="lg"
py={{ base: "12", md: "24" }}
px={{ base: "0", sm: "8" }}
>
<Stack spacing="8">
<Stack spacing="6">
<Stack spacing={{ base: "2", md: "3" }} textAlign="center">
<Heading size={useBreakpointValue({ base: "xs", md: "sm" })}>
Log in to your account
</Heading>
</Stack>
</Stack>
<Box
py={{ base: "0", sm: "8" }}
px={{ base: "4", sm: "10" }}
bg={useBreakpointValue({ base: "transparent", sm: "bg-surface" })}
boxShadow={{ base: "none", sm: useColorModeValue("md", "md-dark") }}
borderRadius={{ base: "none", sm: "xl" }}
>
<Formik
initialValues={{
password: "",
email: "",
}}
validationSchema={formSchema}
onSubmit={(values: Values) => {
console.log("submiting");
console.log(values);
}}
>
<Form>
<Stack spacing="6">
<Stack spacing="5">
<Field name="email" id="email" type="email">
{({ field, form }) => (
<FormControl
isInvalid={form.errors.email && form.touched.email}
>
<FormLabel htmlFor="email">Email</FormLabel>
<Input {...field} />
<FormErrorMessage>{form.errors.email}</FormErrorMessage>
</FormControl>
)}
</Field>
<Field name="password" id="password" type="password">
{({ field, form }) => (
<FormControl
isInvalid={
form.errors.password && form.touched.password
}
>
<FormLabel htmlFor="password">Password</FormLabel>
<PasswordField {...field} />
<FormErrorMessage>
{form.errors.password}
</FormErrorMessage>
</FormControl>
)}
</Field>
</Stack>
<HStack justify="space-between">
<Checkbox defaultChecked>Remember me</Checkbox>
<Button variant="link" colorScheme="blue" size="sm">
Forgot password?
</Button>
</HStack>
<Stack spacing="6">
<Button variant="primary">Sign in</Button>
</Stack>
</Stack>
</Form>
</Formik>
</Box>
</Stack>
</Container>
);
};
export default Login;

You just need to define your fieldProp like so

 interface FieldProps {
field: {
name: string;
value: any;
onChange: (event: React.ChangeEvent<any>) => void;
onBlur: (event: React.FocusEvent<any>) => void;
};
form: {
touched: { [field: string]: boolean };
errors: { [field: string]: string };
};
meta: {
error?: string;
touched?: boolean;
};
} 

then you are good to go, pass these field and the form as props like so

({field, form, meta}: FieldProps)=>()

Example with tsx:

import { ErrorMessage, Field, FieldProps, Form, Formik } from "formik";

...

<Field name="termsAndConditions">
  {({ field }: FieldProps) => (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={field.value}
            {...field}
          />
        }
        label="I agree to the terms and conditions"
      />

      <ErrorMessage
        name="termsAndConditions"
        component="div"
      />
    </div>
  )}
</Field>