如何正确验证并提交带有typescript的ant设计表单是否有效

import { Form, Input, Button } from 'antd';
import { useForm } from 'antd/lib/form/Form';

const MyFormComponent: React.FC = () => {
  const [form] = useForm();
  ...
  return (
    <Form form={form} onFinish={handleSubmit}>
      ...
    </Form>
  );
};

<Form.Item name="fieldName" label="Field Label" rules={[{ required: true, message: 'Please enter a value' }]}>
  <Input />
</Form.Item>

const handleSubmit = () => {
  form.validateFields()
    .then(values => {
      // 当所有字段验证通过时，会执行这里的逻辑
      console.log(values);
    })
    .catch(errorInfo => {
      // 当有字段验证失败时，会执行这里的逻辑
      console.log('Validation failed:', errorInfo);
    });
};

<Form.Item>
  <Button type="primary" htmlType="submit" onClick={handleSubmit}>
    Submit
  </Button>
</Form.Item>