下面是我的代码和一个错误的屏幕截图。2这个屏幕截图只是为了视觉帮助。3产生错误的代码片段就在它的正下方。
错误是TypeScript指出绑定元素隐式具有任何类型。我不确定它应该具有什么类型。我对TypeScript非常陌生，我希望能澄清此错误并提供如何修复它的指针。
我非常感谢任何帮助。我做了一些研究，但我发现与此问题有关的都标记为修复了一段时间，但我在这里。它可能是我那么：）
我正在使用脉轮UI
代码灵感来自于Formik示例以及脉轮UI文档上的示例

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;