[4366] Fix a warning for an autocomplete widget

Bug: #4366
Signed-off-by: Denis Nikiforov <[email protected]>

CHANGELOG.adoc

@@ -27,6 +27,8 @@ This may have some consequences for downstream applications which are embedding
 
 === Bug fixes
 
+- https://github.com/eclipse-sirius/sirius-web/issues/4366[#4366] [form] Fix a warning for an autocomplete widget
+
 
 === New Features
 

packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx

@@ -105,19 +105,23 @@ export const ReferencePreview = ({ widget }: PreviewWidgetProps) => {
         value={options}
         disableClearable
         renderTags={(value, getTagProps) =>
-          value.map(({ label, iconURL }, index) => (
-            <Chip
-              classes={{ label: classes.referenceValueStyle }}
-              label={label}
-              data-testid={`reference-value-${label}`}
-              icon={
-                <div>
-                  <IconOverlay iconURL={[iconURL]} alt={''} />
-                </div>
-              }
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map(({ label, iconURL }, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                classes={{ label: classes.referenceValueStyle }}
+                label={label}
+                data-testid={`reference-value-${label}`}
+                icon={
+                  <div>
+                    <IconOverlay iconURL={[iconURL]} alt={''} />
+                  </div>
+                }
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx

@@ -244,21 +244,25 @@ export const ValuedReferenceAutocomplete = ({
       )}
       disableClearable
       renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <Chip
-            classes={{ label: classes.referenceValueStyle }}
-            label={option.label}
-            data-testid={`reference-value-${option.label}`}
-            icon={
-              <div>
-                <IconOverlay iconURL={option.iconURL} alt={option.kind} />
-              </div>
-            }
-            clickable={!readOnly && !widget.readOnly}
-            onClick={() => optionClickHandler(option)}
-            {...getTagProps({ index })}
-          />
-        ))
+        value.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              classes={{ label: classes.referenceValueStyle }}
+              label={option.label}
+              data-testid={`reference-value-${option.label}`}
+              icon={
+                <div>
+                  <IconOverlay iconURL={option.iconURL} alt={option.kind} />
+                </div>
+              }
+              clickable={!readOnly && !widget.readOnly}
+              onClick={() => optionClickHandler(option)}
+              {...tagProps}
+            />
+          );
+        })
       }
       renderInput={(params) => (
         <TextField