refactor: use react-hook-form for Field type config forms (#5326)

Closes #4295

Note: for the sake of an easier code review, I did not rename/move some
files and added "todo" comments instead so Github is able to match those
files with their previous version.

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx

@@ -14,7 +14,7 @@ export const MultiSelectFieldDisplay = ({
   const { fieldValues, fieldDefinition } = useMultiSelectField();
 
   const selectedOptions = fieldValues
-    ? fieldDefinition.metadata.options.filter((option) =>
+    ? fieldDefinition.metadata.options?.filter((option) =>
         fieldValues.includes(option.value),
       )
     : [];

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFieldDisplay.tsx

@@ -6,7 +6,11 @@ import { useRelationField } from '../../hooks/useRelationField';
 export const RelationFieldDisplay = () => {
   const { fieldValue, fieldDefinition, maxWidth } = useRelationField();
 
-  if (!fieldValue || !fieldDefinition) return null;
+  if (
+    !fieldValue ||
+    !fieldDefinition?.metadata.relationObjectMetadataNameSingular
+  )
+    return null;
 
   return (
     <RecordChip

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/SelectFieldDisplay.tsx

@@ -5,7 +5,7 @@ import { useSelectField } from '../../hooks/useSelectField';
 export const SelectFieldDisplay = () => {
   const { fieldValue, fieldDefinition } = useSelectField();
 
-  const selectedOption = fieldDefinition.metadata.options.find(
+  const selectedOption = fieldDefinition.metadata.options?.find(
     (option) => option.value === fieldValue,
   );