Conditionally hidden field still renders empty div in RJSF v5 (no dependencies used)

[sohwijung]

Hi team,

I'm using RJSF v5 and have a use case where the display of a field depends on the value of another. For example, I have provided a sample schema below where licenseNumber should only appear if age is greater than 16. However, even when the condition is not met, the form still renders an empty div where the licenseNumber field would be. It looks like the field is hidden but not removed, which creates unnecessary blank space.

// schema.json
{ "type": "object", "required": ["age"], "properties": { "age": { "type": "number", "title": "Age" }, "licenseNumber": { "type": "number", "title": "License Number" } } }

// Form
<Form validator={validator} schema={schema} uiSchema={uiSchema} formData={formData} onChange={(e) => setFormData(e.formData)} fields={{ licenseNumber: (formProps) => { const age = formProps.formContext.age; if (age > 16) { return ( <div> <label>{formProps.schema.title}</label> <input type="text" value={formProps.formData || ""} onChange={(e) => formProps.onChange(e.target.value)} /> </div> ); } return null; } }} formContext={{ age: formData.age }} showErrorList={false} omitExtraData noHtml5Validate />

Even when age is 10, the licenseNumber field does not appear, but an empty div still occupies space in the form layout.

Is this expected behavior? Is there a way to completely remove the field (and its container) from the DOM when it's not rendered by schema logic, rather than just hiding it visually?

** I'm under the circumstances where changing the schema to have "dependencies" is not an option.

Thanks so much for your work on this library!