如何将Formik字段渲染为文本区域+样式组件？

npm install formik

import { Formik, Field, ErrorMessage } from 'formik';
import React from 'react';
import { Textarea, Box, Text } from '@chakra-ui/react';

const MyForm = () => {
  const initialValues = {
    myField: '',
  };

  const validate = (values) => {
    const errors = {};

    // 在这里添加表单字段的验证规则

    return errors;
  };

  const handleSubmit = (values) => {
    // 处理表单提交的逻辑
  };

  return (
    <Formik
      initialValues={initialValues}
      validate={validate}
      onSubmit={handleSubmit}
    >
      {(formik) => (
        <form onSubmit={formik.handleSubmit}>
          <Box>
            <Text>My Field:</Text>
            <Field name="myField">
              {({ field }) => (
                <Textarea {...field} placeholder="Enter your text" />
              )}
            </Field>
            <ErrorMessage name="myField" component={Text} color="red" />
          </Box>
          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
  );
};

const App = () => {
  return (
    <div>
      <MyForm />
    </div>
  );
};