How to use validator to validate Form.List on Antd

const BankAccountSubForm = () => {
  return <Form.List
    name="bank_account"
  >
    {(fields, { add, remove }) => (
      <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
        {fields.map((field) => (
          <Card
            size="small"
            title={`Bank Account ${field.name + 1}`}
            key={field.key}
            extra={
              <CloseOutlined
                onClick={() => {
                  remove(field.name);
                }}
              />
            }
          >
            <Form.Item
              label="Bank Name"
              name={[field.name, "bank_name"]}
              rules={[
                {
                  required: true,
                  message: "Please Choose Bank",
                },
              ]}
            >
              <Select
                showSearch
                placeholder="Select a bank"
                optionFilterProp="label"
                options={banksInIndonesia.map((bank) => ({
                  value: bank,
                  label: bank,
                }))}
              />
            </Form.Item>
            <Form.Item
              label="Bank Number"
              name={[field.name, "bank_number"]}
              rules={[
                {
                  required: true,
                  message: "Mohon masukkan nomor rekening",
                },
                {
                  pattern: /^[0-9]*$/,
                  message: "Nomor rekening hanya boleh berisi angka",
                }
              ]}
            >
              <Input placeholder="1234567" />
            </Form.Item>
          </Card>
        ))}

        <Button type="dashed" onClick={() => add()} block>
          + Add Bank Account
        </Button>
      </div>
    )}
  </Form.List>
}

const BankAccountSubForm = () => {
  return <Form.List
    name="bank_account"
  >
    {(fields, { add, remove }) => (
      <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
        {fields.map((field) => (
          <Card
            size="small"
            title={`Bank Account ${field.name + 1}`}
            key={field.key}
            extra={
              <CloseOutlined
                onClick={() => {
                  remove(field.name);
                }}
              />
            }
          >
            <Form.Item
              label="Bank Name"
              name={[field.name, "bank_name"]}
              rules={[
                {
                  required: true,
                  message: "Please Choose Bank",
                },
              ]}
            >
              <Select
                showSearch
                placeholder="Select a bank"
                optionFilterProp="label"
                options={banksInIndonesia.map((bank) => ({
                  value: bank,
                  label: bank,
                }))}
              />
            </Form.Item>
            <Form.Item
              label="Bank Number"
              name={[field.name, "bank_number"]}
              rules={[
                {
                  required: true,
                  message: "Mohon masukkan nomor rekening",
                },
                {
                  pattern: /^[0-9]*$/,
                  message: "Nomor rekening hanya boleh berisi angka",
                }
              ]}
            >
              <Input placeholder="1234567" />
            </Form.Item>
          </Card>
        ))}

        <Button type="dashed" onClick={() => add()} block>
          + Add Bank Account
        </Button>
      </div>
    )}
  </Form.List>
}