fix: console errors from highlight component and tag key prop placement (#8669)

Addressing some oversights that led to browser console errors.

This PR fixes console errors related to the recently introduced
highlight component (#8643) and tag row component in the new flag
metadata panel (#8663).

frontend/src/component/common/Highlight/Highlight.tsx

@@ -1,5 +1,5 @@
 import { alpha, styled } from '@mui/material';
-import type { ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useHighlightContext } from './HighlightContext';
 import type { HighlightKey } from './HighlightProvider';
 
@@ -27,17 +27,23 @@ const StyledHighlight = styled('div', {
     },
 }));
 
-interface IHighlightProps {
+interface IHighlightProps extends HTMLAttributes<HTMLDivElement> {
     highlightKey: HighlightKey;
     children: ReactNode;
 }
 
-export const Highlight = ({ highlightKey, children }: IHighlightProps) => {
+export const Highlight = forwardRef<HTMLDivElement, IHighlightProps>(
-    const { isHighlighted } = useHighlightContext();
+    ({ highlightKey, children, ...props }, ref) => {
+        const { isHighlighted } = useHighlightContext();
 
-    return (
+        return (
-        <StyledHighlight highlighted={isHighlighted(highlightKey)}>
+            <StyledHighlight
-            {children}
+                ref={ref}
-        </StyledHighlight>
+                highlighted={isHighlighted(highlightKey)}
-    );
+                {...props}
-};
+            >
+                {children}
+            </StyledHighlight>
+        );
+    },
+);

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx

@@ -128,13 +128,13 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
                                 const tagLabel = `${tag.type}:${tag.value}`;
                                 return (
                                     <Tooltip
+                                        key={tagLabel}
                                         title={
                                             tagLabel.length > 35 ? tagLabel : ''
                                         }
                                         arrow
                                     >
                                         <StyledAddedTag
-                                            key={tagLabel}
                                             label={tagLabel}
                                             size='small'
                                             deleteIcon={