Problem Description

I am working with a dynamic form using Ant Design (Antd) in a React project. The form includes a Select component that dynamically renders options based on an array of fields, each with an id and name. The form was functioning correctly until I added a filter to exclude already selected fields from the dropdown options.

Issue: After applying the filter, when I select an option from the filtered list, the Select component displays the value (the id of the field) instead of the label (the name of the field).

Code Example

Here: https://stackblitz.com/edit/vitejs-vite-nditzv?file=src%2Fcomponents%2FDynamicForm.tsx,src%2FApp.tsx

Additional Information

"antd": "^5.19.4"
react": "^18.3.1"

Expected Behavior

The Select component should display the name of the field after selection.

Actual Behavior

The Select component displays the id of the field after selection.