What's the recommended way to handle hidden fields?

const invoiceEmailSameOrDifferent = useStore(form.store, (state) => state.values.invoiceEmailSameOrDifferent); // values are 'same' of 'different'

// radio buttons updating the value for invoiceEmailSameOrDifferent here

{invoiceEmailSameOrDifferent === 'different' && (
  <form.Field
    name="invoiceEmail"
    children={(field) => {
      return (
        <>
          <input
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
          <FieldInfo field={field} />
        </>
      );
    }}
  />
)}
<div hidden={invoiceEmailSameOrDifferent !== 'different'}>
  {<form.Field
    name="invoiceEmail"
    children={(field) => {
      return (
        <>
          <input
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
          <FieldInfo field={field} />
        </>
      );
    }}
  />}
</div>