Creating Items Nested Many to Many causes duplication on Portal UI

[ChristianBasiga]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Displaying added relationship incorrectly. If delete one of duplicated entries, it will revert to latest added collection. Trying to save it will also fail.

Only way to avoid this issue, is add 1 nested relationship at a time, and then save at the root collection before next change.

Attached video:

Uploading IssueVideoProof.mp4…

To Reproduce

1. Create Collection1 that has a one to many field with another Collection2 which has a many to many field with itself(Collection2).
2. Create Item1 in Collecton 2 through Collection 1 one to many field.
3. Edit Item1 while in Collection1 view
4. Add item2 in many to many field of Collection 2 View
5. Add item3 in many to many field of Collection 2 View
   Expectation: See item2, item3.
   Actual: item2, item2

What version of Directus are you using?

9.0.0-rc.87

What version of Node.js are you using?

14.17.3

What database are you using?

13

What browser are you using?

Chrome, Microsoft Edge

What operating system are you using?

Windows 10

How are you deploying Directus?

running locally

[rijkvanzanten]

I believe this is caused by the same underlying issue as #3721