🐛 fix: forward ref the component to fix console error

packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, useMemo } from 'react';
+import React, { forwardRef, ComponentPropsWithoutRef, useMemo } from 'react';
 import { Overwrite, UseComboboxGetItemPropsReturnValue } from 'downshift';
 import { SelectOption, SelectOrientation } from 'components/shared/Select';
 import { selectItemTheme, SelectItemTheme } from './SelectItem.theme';
@@ -29,7 +29,9 @@ export interface SelectItemProps
   empty?: boolean;
 }
 
-export const SelectItem = ({
+const SelectItem = forwardRef<HTMLLIElement, SelectItemProps>(
+  (
+    {
       className,
       selected,
       option,
@@ -38,7 +40,9 @@ export const SelectItem = ({
       empty,
       variant,
       ...props
-}: SelectItemProps) => {
+    },
+    ref,
+  ) => {
     const theme = selectItemTheme({ active: hovered, orientation, variant });
 
     const { label, description, leftIcon, rightIcon, disabled } = option;
@@ -48,7 +52,9 @@ export const SelectItem = ({
         return cloneIcon(rightIcon, { className: theme.icon() });
       } else if (selected) {
         return (
-        <CheckRadioIcon className={cn(theme.icon(), 'text-controls-primary')} />
+          <CheckRadioIcon
+            className={cn(theme.icon(), 'text-controls-primary')}
+          />
         );
       }
       return null;
@@ -65,6 +71,7 @@ export const SelectItem = ({
     return (
       <li
         {...props}
+        ref={ref}
         className={theme.wrapper({ className })}
         data-disabled={disabled}
       >
@@ -83,4 +90,9 @@ export const SelectItem = ({
         {renderRightIcon}
       </li>
     );
-};
+  },
+);
+
+SelectItem.displayName = 'SelectItem';
+
+export { SelectItem };

packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { forwardRef, ComponentPropsWithoutRef } from 'react';
 import {
   Overwrite,
   UseMultipleSelectionGetSelectedItemReturnValue,
@@ -35,17 +35,12 @@ export interface SelectValueProps
 /**
  * The SelectValue component is used to display the selected value of a select component
  */
-export const SelectValue = ({
-  className,
-  size,
-  option,
-  onDelete,
-  ...props
-}: SelectValueProps) => {
+const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
+  ({ className, size, option, onDelete, ...props }, ref) => {
     const theme = selectValueTheme();
 
     return (
-    <span {...props} className={theme.wrapper({ className, size })}>
+      <span {...props} ref={ref} className={theme.wrapper({ className, size })}>
         {option.label}
         <Button
           onClick={() => onDelete?.(option)}
@@ -57,4 +52,9 @@ export const SelectValue = ({
         </Button>
       </span>
     );
-};
+  },
+);
+
+SelectValue.displayName = 'SelectValue';
+
+export { SelectValue };