diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
index 641cc0f5..e00e7f47 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -194,7 +194,7 @@ export default function CreateOwnerForm(props) {
   const [name, setName] = React.useState(initialValues.name);
   const [Dog, setDog] = React.useState(initialValues.Dog);
   const [DogLoading, setDogLoading] = React.useState(false);
-  const [DogRecords, setDogRecords] = React.useState([]);
+  const [dogRecords, setDogRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -443,16 +443,16 @@ export default function CreateOwnerForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Dog\\"
           value={currentDogDisplayValue}
-          options={DogRecords.filter(
-            (r) => !DogIdSet.has(getIDValue.Dog?.(r))
-          ).map((r) => ({
-            id: getIDValue.Dog?.(r),
-            label: getDisplayValue.Dog?.(r),
-          }))}
+          options={dogRecords
+            .filter((r) => !DogIdSet.has(getIDValue.Dog?.(r)))
+            .map((r) => ({
+              id: getIDValue.Dog?.(r),
+              label: getDisplayValue.Dog?.(r),
+            }))}
           isLoading={DogLoading}
           onSelect={({ id, label }) => {
             setCurrentDogValue(
-              DogRecords.find((r) =>
+              dogRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -745,7 +745,7 @@ export default function CreateOwnerForm(props) {
   const [name, setName] = React.useState(initialValues.name);
   const [Dog, setDog] = React.useState(initialValues.Dog);
   const [DogLoading, setDogLoading] = React.useState(false);
-  const [DogRecords, setDogRecords] = React.useState([]);
+  const [dogRecords, setDogRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -994,16 +994,16 @@ export default function CreateOwnerForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Dog\\"
           value={currentDogDisplayValue}
-          options={DogRecords.filter(
-            (r) => !DogIdSet.has(getIDValue.Dog?.(r))
-          ).map((r) => ({
-            id: getIDValue.Dog?.(r),
-            label: getDisplayValue.Dog?.(r),
-          }))}
+          options={dogRecords
+            .filter((r) => !DogIdSet.has(getIDValue.Dog?.(r)))
+            .map((r) => ({
+              id: getIDValue.Dog?.(r),
+              label: getDisplayValue.Dog?.(r),
+            }))}
           isLoading={DogLoading}
           onSelect={({ id, label }) => {
             setCurrentDogValue(
-              DogRecords.find((r) =>
+              dogRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -2626,7 +2626,7 @@ export default function MyMemberForm(props) {
   const [selectedTeamIDRecords, setSelectedTeamIDRecords] = React.useState([]);
   const [Team, setTeam] = React.useState(initialValues.Team);
   const [TeamLoading, setTeamLoading] = React.useState(false);
-  const [TeamRecords, setTeamRecords] = React.useState([]);
+  const [teamRecords, setTeamRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -3007,16 +3007,16 @@ export default function MyMemberForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Team\\"
           value={currentTeamDisplayValue}
-          options={TeamRecords.filter(
-            (r) => !TeamIdSet.has(getIDValue.Team?.(r))
-          ).map((r) => ({
-            id: getIDValue.Team?.(r),
-            label: getDisplayValue.Team?.(r),
-          }))}
+          options={teamRecords
+            .filter((r) => !TeamIdSet.has(getIDValue.Team?.(r)))
+            .map((r) => ({
+              id: getIDValue.Team?.(r),
+              label: getDisplayValue.Team?.(r),
+            }))}
           isLoading={TeamLoading}
           onSelect={({ id, label }) => {
             setCurrentTeamValue(
-              TeamRecords.find((r) =>
+              teamRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -3942,7 +3942,7 @@ export default function SchoolCreateForm(props) {
   const [name, setName] = React.useState(initialValues.name);
   const [Students, setStudents] = React.useState(initialValues.Students);
   const [StudentsLoading, setStudentsLoading] = React.useState(false);
-  const [StudentsRecords, setStudentsRecords] = React.useState([]);
+  const [studentsRecords, setStudentsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -4178,16 +4178,16 @@ export default function SchoolCreateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Student\\"
           value={currentStudentsDisplayValue}
-          options={StudentsRecords.filter(
-            (r) => !StudentsIdSet.has(getIDValue.Students?.(r))
-          ).map((r) => ({
-            id: getIDValue.Students?.(r),
-            label: getDisplayValue.Students?.(r),
-          }))}
+          options={studentsRecords
+            .filter((r) => !StudentsIdSet.has(getIDValue.Students?.(r)))
+            .map((r) => ({
+              id: getIDValue.Students?.(r),
+              label: getDisplayValue.Students?.(r),
+            }))}
           isLoading={StudentsLoading}
           onSelect={({ id, label }) => {
             setCurrentStudentsValue(
-              StudentsRecords.find((r) =>
+              studentsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -5548,7 +5548,7 @@ export default function TagCreateForm(props) {
   const [label, setLabel] = React.useState(initialValues.label);
   const [Posts, setPosts] = React.useState(initialValues.Posts);
   const [PostsLoading, setPostsLoading] = React.useState(false);
-  const [PostsRecords, setPostsRecords] = React.useState([]);
+  const [postsRecords, setPostsRecords] = React.useState([]);
   const [statuses, setStatuses] = React.useState(initialValues.statuses);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
@@ -5801,14 +5801,14 @@ export default function TagCreateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Post\\"
           value={currentPostsDisplayValue}
-          options={PostsRecords.map((r) => ({
+          options={postsRecords.map((r) => ({
             id: getIDValue.Posts?.(r),
             label: getDisplayValue.Posts?.(r),
           }))}
           isLoading={PostsLoading}
           onSelect={({ id, label }) => {
             setCurrentPostsValue(
-              PostsRecords.find((r) =>
+              postsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -6868,15 +6868,15 @@ export default function CreateCPKTeacherForm(props) {
   );
   const [CPKStudent, setCPKStudent] = React.useState(initialValues.CPKStudent);
   const [CPKStudentLoading, setCPKStudentLoading] = React.useState(false);
-  const [CPKStudentRecords, setCPKStudentRecords] = React.useState([]);
+  const [cPKStudentRecords, setCPKStudentRecords] = React.useState([]);
   const [CPKClasses, setCPKClasses] = React.useState(initialValues.CPKClasses);
   const [CPKClassesLoading, setCPKClassesLoading] = React.useState(false);
-  const [CPKClassesRecords, setCPKClassesRecords] = React.useState([]);
+  const [cPKClassesRecords, setCPKClassesRecords] = React.useState([]);
   const [CPKProjects, setCPKProjects] = React.useState(
     initialValues.CPKProjects
   );
   const [CPKProjectsLoading, setCPKProjectsLoading] = React.useState(false);
-  const [CPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
+  const [cPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -7227,16 +7227,16 @@ export default function CreateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKStudent\\"
           value={currentCPKStudentDisplayValue}
-          options={CPKStudentRecords.filter(
-            (r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKStudent?.(r),
-            label: getDisplayValue.CPKStudent?.(r),
-          }))}
+          options={cPKStudentRecords
+            .filter((r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKStudent?.(r),
+              label: getDisplayValue.CPKStudent?.(r),
+            }))}
           isLoading={CPKStudentLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKStudentValue(
-              CPKStudentRecords.find((r) =>
+              cPKStudentRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -7308,14 +7308,14 @@ export default function CreateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKClass\\"
           value={currentCPKClassesDisplayValue}
-          options={CPKClassesRecords.map((r) => ({
+          options={cPKClassesRecords.map((r) => ({
             id: getIDValue.CPKClasses?.(r),
             label: getDisplayValue.CPKClasses?.(r),
           }))}
           isLoading={CPKClassesLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKClassesValue(
-              CPKClassesRecords.find((r) =>
+              cPKClassesRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -7387,16 +7387,16 @@ export default function CreateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKProject\\"
           value={currentCPKProjectsDisplayValue}
-          options={CPKProjectsRecords.filter(
-            (r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKProjects?.(r),
-            label: getDisplayValue.CPKProjects?.(r),
-          }))}
+          options={cPKProjectsRecords
+            .filter((r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKProjects?.(r),
+              label: getDisplayValue.CPKProjects?.(r),
+            }))}
           isLoading={CPKProjectsLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKProjectsValue(
-              CPKProjectsRecords.find((r) =>
+              cPKProjectsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -8269,7 +8269,7 @@ export default function PostUpdateForm(props) {
   );
   const [Comments, setComments] = React.useState(initialValues.Comments);
   const [CommentsLoading, setCommentsLoading] = React.useState(false);
-  const [CommentsRecords, setCommentsRecords] = React.useState([]);
+  const [commentsRecords, setCommentsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -8646,14 +8646,14 @@ export default function PostUpdateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Comment\\"
           value={currentCommentsDisplayValue}
-          options={CommentsRecords.map((r) => ({
+          options={commentsRecords.map((r) => ({
             id: getIDValue.Comments?.(r),
             label: getDisplayValue.Comments?.(r),
           }))}
           isLoading={CommentsLoading}
           onSelect={({ id, label }) => {
             setCurrentCommentsValue(
-              CommentsRecords.find((r) =>
+              commentsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -10796,7 +10796,7 @@ export default function MovieUpdateForm(props) {
             }
           });
           tagsToLinkMap.forEach((count, id) => {
-            const tagToLink = tagRecords.find((r) =>
+            const tagToLink = tagsRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -11579,7 +11579,7 @@ export default function MovieUpdateForm(props) {
             }
           });
           tagsToLinkMap.forEach((count, id) => {
-            const tagToLink = tagRecords.find((r) =>
+            const tagToLink = tagsRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -12110,7 +12110,7 @@ export default function CommentUpdateForm(props) {
   const [selectedPostIDRecords, setSelectedPostIDRecords] = React.useState([]);
   const [Post, setPost] = React.useState(initialValues.Post);
   const [PostLoading, setPostLoading] = React.useState(false);
-  const [PostRecords, setPostRecords] = React.useState([]);
+  const [postRecords, setPostRecords] = React.useState([]);
   const [post1, setPost1] = React.useState(initialValues.post);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
@@ -12497,16 +12497,16 @@ export default function CommentUpdateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Post\\"
           value={currentPostDisplayValue}
-          options={PostRecords.filter(
-            (r) => !PostIdSet.has(getIDValue.Post?.(r))
-          ).map((r) => ({
-            id: getIDValue.Post?.(r),
-            label: getDisplayValue.Post?.(r),
-          }))}
+          options={postRecords
+            .filter((r) => !PostIdSet.has(getIDValue.Post?.(r)))
+            .map((r) => ({
+              id: getIDValue.Post?.(r),
+              label: getDisplayValue.Post?.(r),
+            }))}
           isLoading={PostLoading}
           onSelect={({ id, label }) => {
             setCurrentPostValue(
-              PostRecords.find((r) =>
+              postRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -12844,7 +12844,7 @@ export default function CommentUpdateForm(props) {
   const [selectedPostIDRecords, setSelectedPostIDRecords] = React.useState([]);
   const [Post, setPost] = React.useState(initialValues.Post);
   const [PostLoading, setPostLoading] = React.useState(false);
-  const [PostRecords, setPostRecords] = React.useState([]);
+  const [postRecords, setPostRecords] = React.useState([]);
   const [post1, setPost1] = React.useState(initialValues.post);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
@@ -13231,16 +13231,16 @@ export default function CommentUpdateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Post\\"
           value={currentPostDisplayValue}
-          options={PostRecords.filter(
-            (r) => !PostIdSet.has(getIDValue.Post?.(r))
-          ).map((r) => ({
-            id: getIDValue.Post?.(r),
-            label: getDisplayValue.Post?.(r),
-          }))}
+          options={postRecords
+            .filter((r) => !PostIdSet.has(getIDValue.Post?.(r)))
+            .map((r) => ({
+              id: getIDValue.Post?.(r),
+              label: getDisplayValue.Post?.(r),
+            }))}
           isLoading={PostLoading}
           onSelect={({ id, label }) => {
             setCurrentPostValue(
-              PostRecords.find((r) =>
+              postRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -13576,7 +13576,7 @@ export default function CommentUpdateForm(props) {
   const [selectedPostIDRecords, setSelectedPostIDRecords] = React.useState([]);
   const [Post, setPost] = React.useState(initialValues.Post);
   const [PostLoading, setPostLoading] = React.useState(false);
-  const [PostRecords, setPostRecords] = React.useState([]);
+  const [postRecords, setPostRecords] = React.useState([]);
   const [post1, setPost1] = React.useState(initialValues.post);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
@@ -13963,16 +13963,16 @@ export default function CommentUpdateForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Post\\"
           value={currentPostDisplayValue}
-          options={PostRecords.filter(
-            (r) => !PostIdSet.has(getIDValue.Post?.(r))
-          ).map((r) => ({
-            id: getIDValue.Post?.(r),
-            label: getDisplayValue.Post?.(r),
-          }))}
+          options={postRecords
+            .filter((r) => !PostIdSet.has(getIDValue.Post?.(r)))
+            .map((r) => ({
+              id: getIDValue.Post?.(r),
+              label: getDisplayValue.Post?.(r),
+            }))}
           isLoading={PostLoading}
           onSelect={({ id, label }) => {
             setCurrentPostValue(
-              PostRecords.find((r) =>
+              postRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -15076,7 +15076,7 @@ export default function ClassUpdateForm(props) {
             }
           });
           studentsToLinkMap.forEach((count, id) => {
-            const studentToLink = studentRecords.find((r) =>
+            const studentToLink = studentsRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -15690,7 +15690,7 @@ export default function ClassUpdateForm(props) {
             }
           });
           studentsToLinkMap.forEach((count, id) => {
-            const studentToLink = studentRecords.find((r) =>
+            const studentToLink = studentsRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -16692,15 +16692,15 @@ export default function UpdateCPKTeacherForm(props) {
   );
   const [CPKStudent, setCPKStudent] = React.useState(initialValues.CPKStudent);
   const [CPKStudentLoading, setCPKStudentLoading] = React.useState(false);
-  const [CPKStudentRecords, setCPKStudentRecords] = React.useState([]);
+  const [cPKStudentRecords, setCPKStudentRecords] = React.useState([]);
   const [CPKClasses, setCPKClasses] = React.useState(initialValues.CPKClasses);
   const [CPKClassesLoading, setCPKClassesLoading] = React.useState(false);
-  const [CPKClassesRecords, setCPKClassesRecords] = React.useState([]);
+  const [cPKClassesRecords, setCPKClassesRecords] = React.useState([]);
   const [CPKProjects, setCPKProjects] = React.useState(
     initialValues.CPKProjects
   );
   const [CPKProjectsLoading, setCPKProjectsLoading] = React.useState(false);
-  const [CPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
+  const [cPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -17047,7 +17047,7 @@ export default function UpdateCPKTeacherForm(props) {
             }
           });
           cPKClassesToLinkMap.forEach((count, id) => {
-            const cPKClassToLink = cPKClassRecords.find((r) =>
+            const cPKClassToLink = cPKClassesRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -17217,16 +17217,16 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKStudent\\"
           value={currentCPKStudentDisplayValue}
-          options={CPKStudentRecords.filter(
-            (r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKStudent?.(r),
-            label: getDisplayValue.CPKStudent?.(r),
-          }))}
+          options={cPKStudentRecords
+            .filter((r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKStudent?.(r),
+              label: getDisplayValue.CPKStudent?.(r),
+            }))}
           isLoading={CPKStudentLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKStudentValue(
-              CPKStudentRecords.find((r) =>
+              cPKStudentRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -17299,14 +17299,14 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKClass\\"
           value={currentCPKClassesDisplayValue}
-          options={CPKClassesRecords.map((r) => ({
+          options={cPKClassesRecords.map((r) => ({
             id: getIDValue.CPKClasses?.(r),
             label: getDisplayValue.CPKClasses?.(r),
           }))}
           isLoading={CPKClassesLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKClassesValue(
-              CPKClassesRecords.find((r) =>
+              cPKClassesRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -17378,16 +17378,16 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKProject\\"
           value={currentCPKProjectsDisplayValue}
-          options={CPKProjectsRecords.filter(
-            (r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKProjects?.(r),
-            label: getDisplayValue.CPKProjects?.(r),
-          }))}
+          options={cPKProjectsRecords
+            .filter((r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKProjects?.(r),
+              label: getDisplayValue.CPKProjects?.(r),
+            }))}
           isLoading={CPKProjectsLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKProjectsValue(
-              CPKProjectsRecords.find((r) =>
+              cPKProjectsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -17710,15 +17710,15 @@ export default function UpdateCPKTeacherForm(props) {
   );
   const [CPKStudent, setCPKStudent] = React.useState(initialValues.CPKStudent);
   const [CPKStudentLoading, setCPKStudentLoading] = React.useState(false);
-  const [CPKStudentRecords, setCPKStudentRecords] = React.useState([]);
+  const [cPKStudentRecords, setCPKStudentRecords] = React.useState([]);
   const [CPKClasses, setCPKClasses] = React.useState(initialValues.CPKClasses);
   const [CPKClassesLoading, setCPKClassesLoading] = React.useState(false);
-  const [CPKClassesRecords, setCPKClassesRecords] = React.useState([]);
+  const [cPKClassesRecords, setCPKClassesRecords] = React.useState([]);
   const [CPKProjects, setCPKProjects] = React.useState(
     initialValues.CPKProjects
   );
   const [CPKProjectsLoading, setCPKProjectsLoading] = React.useState(false);
-  const [CPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
+  const [cPKProjectsRecords, setCPKProjectsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -18065,7 +18065,7 @@ export default function UpdateCPKTeacherForm(props) {
             }
           });
           cPKClassesToLinkMap.forEach((count, id) => {
-            const cPKClassToLink = cPKClassRecords.find((r) =>
+            const cPKClassToLink = cPKClassesRecords.find((r) =>
               Object.entries(JSON.parse(id)).every(
                 ([key, value]) => r[key] === value
               )
@@ -18235,16 +18235,16 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKStudent\\"
           value={currentCPKStudentDisplayValue}
-          options={CPKStudentRecords.filter(
-            (r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKStudent?.(r),
-            label: getDisplayValue.CPKStudent?.(r),
-          }))}
+          options={cPKStudentRecords
+            .filter((r) => !CPKStudentIdSet.has(getIDValue.CPKStudent?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKStudent?.(r),
+              label: getDisplayValue.CPKStudent?.(r),
+            }))}
           isLoading={CPKStudentLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKStudentValue(
-              CPKStudentRecords.find((r) =>
+              cPKStudentRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -18317,14 +18317,14 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKClass\\"
           value={currentCPKClassesDisplayValue}
-          options={CPKClassesRecords.map((r) => ({
+          options={cPKClassesRecords.map((r) => ({
             id: getIDValue.CPKClasses?.(r),
             label: getDisplayValue.CPKClasses?.(r),
           }))}
           isLoading={CPKClassesLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKClassesValue(
-              CPKClassesRecords.find((r) =>
+              cPKClassesRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -18396,16 +18396,16 @@ export default function UpdateCPKTeacherForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CPKProject\\"
           value={currentCPKProjectsDisplayValue}
-          options={CPKProjectsRecords.filter(
-            (r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r))
-          ).map((r) => ({
-            id: getIDValue.CPKProjects?.(r),
-            label: getDisplayValue.CPKProjects?.(r),
-          }))}
+          options={cPKProjectsRecords
+            .filter((r) => !CPKProjectsIdSet.has(getIDValue.CPKProjects?.(r)))
+            .map((r) => ({
+              id: getIDValue.CPKProjects?.(r),
+              label: getDisplayValue.CPKProjects?.(r),
+            }))}
           isLoading={CPKProjectsLoading}
           onSelect={({ id, label }) => {
             setCurrentCPKProjectsValue(
-              CPKProjectsRecords.find((r) =>
+              cPKProjectsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -19499,10 +19499,10 @@ export default function CreateCommentForm(props) {
   const [postRecords, setPostRecords] = React.useState([]);
   const [User, setUser] = React.useState(initialValues.User);
   const [UserLoading, setUserLoading] = React.useState(false);
-  const [UserRecords, setUserRecords] = React.useState([]);
+  const [userRecords, setUserRecords] = React.useState([]);
   const [Org, setOrg] = React.useState(initialValues.Org);
   const [OrgLoading, setOrgLoading] = React.useState(false);
-  const [OrgRecords, setOrgRecords] = React.useState([]);
+  const [orgRecords, setOrgRecords] = React.useState([]);
   const [postCommentsId, setPostCommentsId] = React.useState(
     initialValues.postCommentsId
   );
@@ -19948,16 +19948,16 @@ export default function CreateCommentForm(props) {
           isReadOnly={false}
           placeholder=\\"Search User\\"
           value={currentUserDisplayValue}
-          options={UserRecords.filter(
-            (r) => !UserIdSet.has(getIDValue.User?.(r))
-          ).map((r) => ({
-            id: getIDValue.User?.(r),
-            label: getDisplayValue.User?.(r),
-          }))}
+          options={userRecords
+            .filter((r) => !UserIdSet.has(getIDValue.User?.(r)))
+            .map((r) => ({
+              id: getIDValue.User?.(r),
+              label: getDisplayValue.User?.(r),
+            }))}
           isLoading={UserLoading}
           onSelect={({ id, label }) => {
             setCurrentUserValue(
-              UserRecords.find((r) =>
+              userRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -20027,16 +20027,16 @@ export default function CreateCommentForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Org\\"
           value={currentOrgDisplayValue}
-          options={OrgRecords.filter(
-            (r) => !OrgIdSet.has(getIDValue.Org?.(r))
-          ).map((r) => ({
-            id: getIDValue.Org?.(r),
-            label: getDisplayValue.Org?.(r),
-          }))}
+          options={orgRecords
+            .filter((r) => !OrgIdSet.has(getIDValue.Org?.(r)))
+            .map((r) => ({
+              id: getIDValue.Org?.(r),
+              label: getDisplayValue.Org?.(r),
+            }))}
           isLoading={OrgLoading}
           onSelect={({ id, label }) => {
             setCurrentOrgValue(
-              OrgRecords.find((r) =>
+              orgRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -20455,23 +20455,23 @@ export default function CreateCompositeDogForm(props) {
     initialValues.CompositeBowl
   );
   const [CompositeBowlLoading, setCompositeBowlLoading] = React.useState(false);
-  const [CompositeBowlRecords, setCompositeBowlRecords] = React.useState([]);
+  const [compositeBowlRecords, setCompositeBowlRecords] = React.useState([]);
   const [CompositeOwner, setCompositeOwner] = React.useState(
     initialValues.CompositeOwner
   );
   const [CompositeOwnerLoading, setCompositeOwnerLoading] =
     React.useState(false);
-  const [CompositeOwnerRecords, setCompositeOwnerRecords] = React.useState([]);
+  const [compositeOwnerRecords, setCompositeOwnerRecords] = React.useState([]);
   const [CompositeToys, setCompositeToys] = React.useState(
     initialValues.CompositeToys
   );
   const [CompositeToysLoading, setCompositeToysLoading] = React.useState(false);
-  const [CompositeToysRecords, setCompositeToysRecords] = React.useState([]);
+  const [compositeToysRecords, setCompositeToysRecords] = React.useState([]);
   const [CompositeVets, setCompositeVets] = React.useState(
     initialValues.CompositeVets
   );
   const [CompositeVetsLoading, setCompositeVetsLoading] = React.useState(false);
-  const [CompositeVetsRecords, setCompositeVetsRecords] = React.useState([]);
+  const [compositeVetsRecords, setCompositeVetsRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -20972,16 +20972,18 @@ export default function CreateCompositeDogForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CompositeBowl\\"
           value={currentCompositeBowlDisplayValue}
-          options={CompositeBowlRecords.filter(
-            (r) => !CompositeBowlIdSet.has(getIDValue.CompositeBowl?.(r))
-          ).map((r) => ({
-            id: getIDValue.CompositeBowl?.(r),
-            label: getDisplayValue.CompositeBowl?.(r),
-          }))}
+          options={compositeBowlRecords
+            .filter(
+              (r) => !CompositeBowlIdSet.has(getIDValue.CompositeBowl?.(r))
+            )
+            .map((r) => ({
+              id: getIDValue.CompositeBowl?.(r),
+              label: getDisplayValue.CompositeBowl?.(r),
+            }))}
           isLoading={CompositeBowlLoading}
           onSelect={({ id, label }) => {
             setCurrentCompositeBowlValue(
-              CompositeBowlRecords.find((r) =>
+              compositeBowlRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -21059,16 +21061,18 @@ export default function CreateCompositeDogForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CompositeOwner\\"
           value={currentCompositeOwnerDisplayValue}
-          options={CompositeOwnerRecords.filter(
-            (r) => !CompositeOwnerIdSet.has(getIDValue.CompositeOwner?.(r))
-          ).map((r) => ({
-            id: getIDValue.CompositeOwner?.(r),
-            label: getDisplayValue.CompositeOwner?.(r),
-          }))}
+          options={compositeOwnerRecords
+            .filter(
+              (r) => !CompositeOwnerIdSet.has(getIDValue.CompositeOwner?.(r))
+            )
+            .map((r) => ({
+              id: getIDValue.CompositeOwner?.(r),
+              label: getDisplayValue.CompositeOwner?.(r),
+            }))}
           isLoading={CompositeOwnerLoading}
           onSelect={({ id, label }) => {
             setCurrentCompositeOwnerValue(
-              CompositeOwnerRecords.find((r) =>
+              compositeOwnerRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -21145,16 +21149,18 @@ export default function CreateCompositeDogForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CompositeToy\\"
           value={currentCompositeToysDisplayValue}
-          options={CompositeToysRecords.filter(
-            (r) => !CompositeToysIdSet.has(getIDValue.CompositeToys?.(r))
-          ).map((r) => ({
-            id: getIDValue.CompositeToys?.(r),
-            label: getDisplayValue.CompositeToys?.(r),
-          }))}
+          options={compositeToysRecords
+            .filter(
+              (r) => !CompositeToysIdSet.has(getIDValue.CompositeToys?.(r))
+            )
+            .map((r) => ({
+              id: getIDValue.CompositeToys?.(r),
+              label: getDisplayValue.CompositeToys?.(r),
+            }))}
           isLoading={CompositeToysLoading}
           onSelect={({ id, label }) => {
             setCurrentCompositeToysValue(
-              CompositeToysRecords.find((r) =>
+              compositeToysRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -21231,14 +21237,14 @@ export default function CreateCompositeDogForm(props) {
           isReadOnly={false}
           placeholder=\\"Search CompositeVet\\"
           value={currentCompositeVetsDisplayValue}
-          options={CompositeVetsRecords.map((r) => ({
+          options={compositeVetsRecords.map((r) => ({
             id: getIDValue.CompositeVets?.(r),
             label: getDisplayValue.CompositeVets?.(r),
           }))}
           isLoading={CompositeVetsLoading}
           onSelect={({ id, label }) => {
             setCurrentCompositeVetsValue(
-              CompositeVetsRecords.find((r) =>
+              compositeVetsRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
@@ -24592,7 +24598,7 @@ export default function CreateOwnerForm(props) {
   const [name, setName] = React.useState(initialValues.name);
   const [Dog, setDog] = React.useState(initialValues.Dog);
   const [DogLoading, setDogLoading] = React.useState(false);
-  const [DogRecords, setDogRecords] = React.useState([]);
+  const [dogRecords, setDogRecords] = React.useState([]);
   const autocompleteLength = 10;
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
@@ -24841,16 +24847,16 @@ export default function CreateOwnerForm(props) {
           isReadOnly={false}
           placeholder=\\"Search Dog\\"
           value={currentDogDisplayValue}
-          options={DogRecords.filter(
-            (r) => !DogIdSet.has(getIDValue.Dog?.(r))
-          ).map((r) => ({
-            id: getIDValue.Dog?.(r),
-            label: getDisplayValue.Dog?.(r),
-          }))}
+          options={dogRecords
+            .filter((r) => !DogIdSet.has(getIDValue.Dog?.(r)))
+            .map((r) => ({
+              id: getIDValue.Dog?.(r),
+              label: getDisplayValue.Dog?.(r),
+            }))}
           isLoading={DogLoading}
           onSelect={({ id, label }) => {
             setCurrentDogValue(
-              DogRecords.find((r) =>
+              dogRecords.find((r) =>
                 Object.entries(JSON.parse(id)).every(
                   ([key, value]) => r[key] === value
                 )
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts
index dd39db7e..5326d04d 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts
@@ -374,6 +374,7 @@ examples:
     );
     setCurrentPrimaryAuthorDisplayValue(label);
   }}
+  // For autocomplete field only
  */
 export function buildOnSelect({
   sanitizedFieldName,
@@ -407,7 +408,9 @@ export function buildOnSelect({
     nextCurrentDisplayValue = factory.createIdentifier(labelString);
 
     nextCurrentValue = getMatchEveryModelFieldCallExpression({
-      recordsArrayName: dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(model),
+      // Autocomplete is special and needs a ref to the model for DataStore because the
+      // fieldName will not be the same as when the reference was created.
+      recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : model),
       JSONName: idString,
     });
   }
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
index 8edba3ad..d42edd67 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
@@ -72,8 +72,8 @@ export const getCurrentValueName = (fieldName: string) => {
 export const getCurrentDisplayValueName = (fieldName: string) =>
   `current${capitalizeFirstLetter(fieldName)}DisplayValue`;
 
-export const getRecordsName = (modelName: string, capitalized = false) =>
-  `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Records`;
+export const getRecordsName = (name: string, capitalized = false) =>
+  `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(name)}Records`;
 
 export const getRecordName = (modelName: string, capitalized = false) =>
   `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Record`;
@@ -271,7 +271,9 @@ export const getUseStateHooks = (
 
     if (dataApi === 'GraphQL' && relationship) {
       acc.push(buildUseStateExpression(`${renderedFieldName}Loading`, factory.createFalse()));
-      acc.push(buildUseStateExpression(`${renderedFieldName}Records`, factory.createArrayLiteralExpression([], false)));
+      acc.push(
+        buildUseStateExpression(getRecordsName(renderedFieldName), factory.createArrayLiteralExpression([], false)),
+      );
       if (hasAutoComplete && !isModelDataType(fieldConfig[1])) {
         acc.push(
           buildUseStateExpression(
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts
index cad36592..6dd218b6 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts
@@ -92,7 +92,7 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
           ? factory.createBinaryExpression(
               factory.createCallExpression(
                 factory.createPropertyAccessExpression(
-                  factory.createIdentifier(getRecordsName(model)),
+                  factory.createIdentifier(getRecordsName(fieldName)),
                   factory.createIdentifier('find'),
                 ),
                 undefined,
@@ -161,6 +161,8 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
             )
           : factory.createCallExpression(
               factory.createPropertyAccessExpression(
+                // DataStore needs a value to the model instead of the field
+                // because the value of field may be different where this variable was defined.
                 factory.createIdentifier(getRecordsName(model)),
                 factory.createIdentifier('find'),
               ),
@@ -210,8 +212,13 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
     id: r?.id,
     label: getDisplayValue['fieldName']?.(r),
   }))
+  // For use in AutoComplete options prop only
  */
-function getSuggestionsForRelationshipScalar(modelName: string, key: string, fieldName: string): CallExpression {
+function getSuggestionsForRelationshipScalar(
+  valueRefForBuildingSuggestions: string,
+  key: string,
+  fieldName: string,
+): CallExpression {
   const recordString = 'r';
 
   const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
@@ -220,7 +227,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
     factory.createPropertyAccessExpression(
       factory.createCallExpression(
         factory.createPropertyAccessExpression(
-          factory.createIdentifier(getRecordsName(modelName)),
+          factory.createIdentifier(getRecordsName(valueRefForBuildingSuggestions)),
           factory.createIdentifier('filter'),
         ),
         undefined,
@@ -340,6 +347,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
     id: getIDValue['primaryAuthor]?.(r),
     label: getDisplayValue['primaryAuthor']?.(r),
   }))
+  For AutoComplete field only
  */
 function getModelTypeSuggestions({
   modelName,
@@ -354,7 +362,9 @@ function getModelTypeSuggestions({
 }): CallExpression {
   const recordString = 'r';
   const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
-  const optionsRecords = dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(modelName);
+  // Autocomplete is special and needs a ref to the model for DataStore because the
+  // fieldName will not be the same as when the reference was created.
+  const optionsRecords = getRecordsName(dataApi === 'GraphQL' ? fieldName : modelName);
 
   const mappingFunction = factory.createArrowFunction(
     undefined,
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts
index ef59b15b..47ee653a 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts
@@ -60,11 +60,10 @@ import { getAmplifyJSVersionToRender } from '../../helpers/amplify-js-versioning
 export const buildRelationshipQuery = (
   relatedModelName: string,
   importCollection: ImportCollection,
+  fieldName: string,
   dataApi?: DataApiKind,
   renderConfigDependencies?: { [key: string]: string },
 ) => {
-  const itemsName = getRecordsName(relatedModelName);
-
   /* istanbul ignore next */
   if (dataApi === 'GraphQL') {
     return factory.createVariableStatement(
@@ -72,7 +71,7 @@ export const buildRelationshipQuery = (
       factory.createVariableDeclarationList(
         [
           factory.createVariableDeclaration(
-            factory.createIdentifier(itemsName),
+            factory.createIdentifier(getRecordsName(fieldName)),
             undefined,
             undefined,
             wrapInParenthesizedExpression(
@@ -101,7 +100,7 @@ export const buildRelationshipQuery = (
     ),
   ];
   return buildBaseCollectionVariableStatement(
-    itemsName,
+    getRecordsName(relatedModelName),
     factory.createCallExpression(factory.createIdentifier('useDataStoreBinding'), undefined, [
       factory.createObjectLiteralExpression(objectProperties, true),
     ]),
@@ -891,7 +890,9 @@ export const buildManyToManyRelationshipStatements = (
                           undefined,
                           undefined,
                           getMatchEveryModelFieldCallExpression({
-                            recordsArrayName: getRecordsName(relatedModelName),
+                            // Special and needs a ref to the model for DataStore because the
+                            // fieldName will not be the same as when the reference was created.
+                            recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : relatedModelName),
                             JSONName: 'id',
                           }),
                         ),
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts
index 7548f222..17a0bc9e 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts
@@ -264,9 +264,7 @@ export const renderArrayFieldComponent = (
       ],
       undefined,
       factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-      dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
-        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
-        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
+      getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
     );
   }
 
@@ -451,9 +449,7 @@ export const renderArrayFieldComponent = (
                 [
                   factory.createExpressionStatement(
                     factory.createCallExpression(setFieldValueIdentifier, undefined, [
-                      dataApi === 'GraphQL'
-                        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
-                        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
+                      getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
                     ]),
                   ),
                   ...setStateStatements,
diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
index 02181759..6cb30016 100644
--- a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
+++ b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
@@ -586,12 +586,12 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
 
     // Add value state and ref array type fields in ArrayField wrapper
 
-    const relatedModelNames: Set<string> = new Set();
+    const relatedModelNames: Map<string, { relatedModelName: string; fieldName: string }> = new Map();
 
     Object.entries(formMetadata.fieldConfigs).forEach(([field, fieldConfig]) => {
       const { sanitizedFieldName, componentType, dataType, relationship } = fieldConfig;
+      const renderedName = sanitizedFieldName || field;
       if (shouldWrapInArrayField(fieldConfig)) {
-        const renderedName = sanitizedFieldName || field;
         if (fieldConfig.relationship) {
           statements.push(
             buildUseStateExpression(
@@ -631,7 +631,10 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
       }
 
       if (relationship && !relatedModelNames.has(relationship.relatedModelName)) {
-        relatedModelNames.add(relationship.relatedModelName);
+        relatedModelNames.set(relationship.relatedModelName, {
+          relatedModelName: relationship.relatedModelName,
+          fieldName: renderedName,
+        });
       }
     });
 
@@ -668,8 +671,14 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
         this.importCollection.addMappedImport(ImportValue.USE_DATA_STORE_BINDING);
 
         statements.push(
-          ...[...relatedModelNames].map((relatedModelName) =>
-            buildRelationshipQuery(relatedModelName, this.importCollection, dataApi, this.renderConfig.dependencies),
+          ...[...relatedModelNames].map(([, { relatedModelName, fieldName }]) =>
+            buildRelationshipQuery(
+              relatedModelName,
+              this.importCollection,
+              fieldName,
+              dataApi,
+              this.renderConfig.dependencies,
+            ),
           ),
         );
       }