fix: wrong filtering

example/public/page-data/dev-404-page/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/condition"},{"path":"/file"},{"path":"/"},{"path":"/relation"}]}},"pageContext":{}}}
+{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/condition"},{"path":"/file"},{"path":"/relation"},{"path":"/"}]}},"pageContext":{}}}

example/public/page-data/index/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-page-js","path":"/","result":{"data":{"page":{"id":"04188964-f833-59d9-98db-1d6208773c69","html":"<h1>tinacms-fields</h1>\n<p>Hey! Welcome to my personal fields playground!\nNavigate to the page of a field to get more instructions.</p>\n<h2>Credits</h2>\n<p><a href='https://mintel.me/'>Created by Marc Mintel</a></p>","frontmatter":{"slug":"/","title":"tinacms-fields","showContent":true},"fileRelativePath":"/src/pages/index.md","rawMarkdownBody":"# tinacms-fields\n\nHey! Welcome to my personal fields playground!\nNavigate to the page of a field to get more instructions.\n\n## Credits\n\n<a href='https://mintel.me/'>Created by Marc Mintel</a>","rawFrontmatter":"{\"title\":\"tinacms-fields\",\"slug\":\"/\",\"showContent\":true,\"related\":[\"0fbaac30-f53b-5e10-83b9-64d325ac5833\",\"9b44b7fd-b7e8-50cd-868c-c10b522dab7d\"]}"},"navigation":{"main":[{"title":"Home","slug":"/","link":null,"internal":true},{"title":"Condition Field","slug":"/condition","link":null,"internal":true},{"title":"Relation Field","slug":null,"link":null,"internal":true},{"title":"Blog","slug":null,"link":"https://mintel.me","internal":false}],"rawJson":"{\"main\":[{\"title\":\"Home\",\"internal\":true,\"slug\":\"/\",\"page\":\"04188964-f833-59d9-98db-1d6208773c69\"},{\"title\":\"Condition Field\",\"internal\":true,\"slug\":\"/condition\",\"page\":\"0fbaac30-f53b-5e10-83b9-64d325ac5833\"},{\"title\":\"Relation Field\",\"internal\":true,\"page\":\"ffbe280b-84f2-5902-9756-f6146149b5c1\"},{\"title\":\"Blog\",\"internal\":false,\"link\":\"https://mintel.me\"}],\"__gatsby_resolved\":{\"fileRelativePath\":\"/src/data/navigation.json\"}}","fileRelativePath":"/src/data/navigation.json"}},"pageContext":{"slug":"/"}}}
+{"componentChunkName":"component---src-templates-page-js","path":"/","result":{"data":{"page":{"id":"04188964-f833-59d9-98db-1d6208773c69","html":"<h1>tinacms-fields</h1>\n<p>Hey! Welcome to my personal fields playground!\nNavigate to the page of a field to get more instructions.</p>\n<h2>Credits</h2>\n<p><a href='https://mintel.me/'>Created by Marc Mintel</a></p>","frontmatter":{"slug":"/","title":"tinacms-fields","showContent":true},"fileRelativePath":"/src/pages/index.md","rawMarkdownBody":"# tinacms-fields\n\nHey! Welcome to my personal fields playground!\nNavigate to the page of a field to get more instructions.\n\n## Credits\n\n<a href='https://mintel.me/'>Created by Marc Mintel</a>","rawFrontmatter":"{\"title\":\"tinacms-fields\",\"slug\":\"/\",\"showContent\":true,\"related\":[\"ffbe280b-84f2-5902-9756-f6146149b5c1\",\"0fbaac30-f53b-5e10-83b9-64d325ac5833\",\"9b44b7fd-b7e8-50cd-868c-c10b522dab7d\"]}"},"navigation":{"main":[{"title":"Home","slug":"/","link":null,"internal":true},{"title":"Condition Field","slug":"/condition","link":null,"internal":true},{"title":"Relation Field","slug":null,"link":null,"internal":true},{"title":"Blog","slug":null,"link":"https://mintel.me","internal":false}],"rawJson":"{\"main\":[{\"title\":\"Home\",\"internal\":true,\"slug\":\"/\",\"page\":\"04188964-f833-59d9-98db-1d6208773c69\"},{\"title\":\"Condition Field\",\"internal\":true,\"slug\":\"/condition\",\"page\":\"0fbaac30-f53b-5e10-83b9-64d325ac5833\"},{\"title\":\"Relation Field\",\"internal\":true,\"page\":\"ffbe280b-84f2-5902-9756-f6146149b5c1\"},{\"title\":\"Blog\",\"internal\":false,\"link\":\"https://mintel.me\"}],\"__gatsby_resolved\":{\"fileRelativePath\":\"/src/data/navigation.json\"}}","fileRelativePath":"/src/data/navigation.json"}},"pageContext":{"slug":"/"}}}

example/src/pages/index.md

@@ -3,6 +3,7 @@ title: tinacms-fields
 slug: /
 showContent: true
 related:
+  - ffbe280b-84f2-5902-9756-f6146149b5c1
   - 0fbaac30-f53b-5e10-83b9-64d325ac5833
   - 9b44b7fd-b7e8-50cd-868c-c10b522dab7d
 ---

packages/tinacms-relation-field/src/components/multiple-relations.js

@@ -12,18 +12,8 @@ import { FormHeader, FormBody, FieldLabel } from './form';
 
 const MultipleRelations = ({ input, field, form }) => {
   const [visible, setVisible] = React.useState(false);
-  const [availableData, setAvailableData] = React.useState(field.data);
   const value = input.value || [];
 
-  React.useEffect(() => {
-    setAvailableData(field.data);
-  }, [field.data]);
-
-  React.useEffect(() => {
-    const newAvailableData = field.data.filter((i) => !value.includes(i.key));
-    setAvailableData(newAvailableData);
-  }, [value]);
-
   const addRelation = React.useCallback(
     (value) => {
       form.mutators.insert(field.name, 0, value);
@@ -52,7 +42,7 @@ const MultipleRelations = ({ input, field, form }) => {
     <DragDropContext onDragEnd={moveArrayItem}>
       <FormHeader>
         <FieldLabel>{field.label}</FieldLabel>
-        { !!availableData.length && (
+        { !!field.data.length && (
           <>
             <IconButton
               primary
@@ -64,7 +54,7 @@ const MultipleRelations = ({ input, field, form }) => {
             </IconButton>
             <RelationMenu open={visible}>
               <RelationMenuList>
-                {availableData.map((item) => {
+                {field.data.filter((item) => !value.includes(field.itemProps(item).key)).map((item) => {
                   const props = field.itemProps(item);
                   return (
                     <RelationOption