Question: How to do conditional rendering in forms with Antd?

[torugok]

I'm trying to make a field that is only displayed according to the state of another form field, however, using form.getFieldValue I'm not having success, the values ​​that come from the API are not recognized as soon as the api loads, however, using onValuesChange behavior is correct after loading the api, but the initial values ​​are not recognized to show the field, how to fix this problem?

import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, Select } from "antd";
import { useState } from "react";

export const FormEdit = () => {
  const { form, formProps, saveButtonProps, formLoading } = useForm({});
  const [valuesForm, setValuesForm] = useState({});

  const saveProps = {
    children: <>Salvar</>,
    ...saveButtonProps,
  };

  const deleteProps = {
    children: <>Excluir</>,
  };

  const isTypeTarget = () => {
    return form.getFieldValue("type") == "TypeTarget";
  };

  return (
    <Edit
      title="Editar"
      saveButtonProps={saveProps}
      deleteButtonProps={deleteProps}
      isLoading={formLoading}
    >
      <Form
        {...formProps}
        layout="vertical"
        onValuesChange={(v) => setValuesForm(v)}
      >
        <Form.Item
          label={"Id"}
          name={["id"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          label={"Nome"}
          name={["name"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Tipo"
          name="type"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select options={typesOptions} />
        </Form.Item>
        {isTypeTarget() ? (
          <Form.Item
            label={"Conditional Field"}
            name={["conditionalField"]}
            rules={[
              {
                required: isTypeTarget(),
              },
            ]}
          >
            <Input />
          </Form.Item>
        ) : (
          <></>
        )}
      </Form>
    </Edit>
  );
};

[torugok]

Form.useWatch from antd solved the problem: https://nanxiaobei.medium.com/watch-a-more-elegant-way-to-monitor-antd-form-field-changes-7c9b12457d67