form adds undefined automatically when removing an item

### Before opening, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-adminui/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-adminui/blob/main/CONTRIBUTING.md#bug-reports).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.

### App Id

d239oef3ri1vlg

### Region

us-east-1

### Environment name

test

### Figma File Version (if applicable)

_No response_

### Amplify CLI Version

_No response_

### If applicable, what version of Node.js are you using?

_No response_

### What operating system are you using?

_No response_

### Browser type?

_No response_

### Describe the bug

When adding an item in join table for example, we then remove the item, the item automatically adds undefined.

https://user-images.githubusercontent.com/87995712/216674584-a4c9f923-e7a4-4e57-94c2-710ccb5ad7d4.mov

### Expected behavior

the form should erase when the item has been cancelled or removed and not add undefined as input

### Reproduction steps

1. add a model with many to many (others can be used)
2. in the data manager add a new item in the join table
3. add input.
4. remove input
5. click else where, cancel the item
6. click on add item
7. see undefined

### Project Identifier

_No response_

### Additional information

_No response_

Reproduce the issue in Data Manager using a many-to-many join table and the listed steps, then trace the form behavior after an input is removed or cancelled. Done means reopening Add Item no longer inserts or displays undefined, while the form clears as expected.

Written by the indexing model from the issue text.