use isOptionEqualToValue method on autocomplete

src/Autocomplete/Autocomplete.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { AutocompleteProps, KeyValueOption } from "./Autocomplete.types";
 import {
   Box,
   Checkbox,
@@ -10,6 +9,10 @@ import {
 } from "@mui/material";
 import { CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
 
+import { AutocompleteProps } from "./Autocomplete.types";
+import { KeyValueOption } from "../Common.types";
+import { isKeyValueOption } from "../utils/common";
+
 export default function Autocomplete<
   Value extends KeyValueOption | string,
   Multiple extends boolean | undefined
@@ -55,6 +58,22 @@ export default function Autocomplete<
       clearIcon={multiple ? null : undefined}
       disabled={disabled}
       size={size}
+      isOptionEqualToValue={(option, value) => {
+        // if the option is a key value pair, compare option.value to value
+        if (isKeyValueOption(option)) {
+          if (option.value === value) {
+            return true;
+          }
+        } else {
+          // if the option is not a key value then compare option to value
+          if (option === value) {
+            return true;
+          }
+        }
+
+        // if the option is not a match, return false
+        return false;
+      }}
     />
   );
 }

src/Autocomplete/Autocomplete.types.ts

@@ -3,7 +3,7 @@ import {
   TextFieldProps
 } from "@mui/material";
 
-export type KeyValueOption = { key: string | number; value: string };
+import { KeyValueOption } from "../Common.types";
 
 export type AutocompleteProps<
   Value extends string | KeyValueOption,

src/Common.types.ts

@@ -11,3 +11,6 @@ export type Label = {
   description?: string;
   name: string;
 };
+
+// KeyValueOption type
+export type KeyValueOption = { key: string | number; value: string };

src/LabelSelector/LabelSelector.jsx

@@ -252,7 +252,9 @@ function LabelSelector({
         }
         noOptionsText="No labels found"
         getOptionLabel={option => option.name}
-        isOptionEqualToValue={(option, value) => option._id === value._id}
+        isOptionEqualToValue={(option, value) => {
+          return option._id === value._id ?? false;
+        }}
         value={value || null}
       />
       <EditLabelDialog

src/utils/common.ts

@@ -0,0 +1,6 @@
+import { KeyValueOption } from "../Common.types";
+
+// This function is used to check if an object is of type KeyValueOption
+export function isKeyValueOption<T>(obj: T): obj is T & KeyValueOption {
+  return obj && typeof obj === "object" && "key" in obj && "value" in obj;
+}