Ensure custom timezone additions aren't deduped away

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-timezone-select",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
     "dev": "concurrently \"tsup --watch\" \"cd example && pnpm dev\"",

src/index.tsx

@@ -66,20 +66,25 @@ export function useTimezoneSelect({
       .sort((a: ITimezoneOption, b: ITimezoneOption) => a.offset - b.offset)
   }, [labelStyle, timezones, currentDatetime])
 
+  const customTimezoneKeys = useMemo(() => {
+    const defaultKeys = new Set(Object.keys(allTimezones))
+    return new Set(Object.keys(timezones).filter((key) => !defaultKeys.has(key)))
+  }, [timezones])
+
   const options = useMemo(() => {
     return allOptions
-      .filter(
-        (item: ITimezoneOption, idx: number, arr: ITimezoneOption[]) =>
-          arr.findIndex((t) => t.offset === item.offset) === idx,
-      )
+      .filter((item: ITimezoneOption, idx: number, arr: ITimezoneOption[]) => {
+        if (customTimezoneKeys.has(item.value)) return true
+        return arr.findIndex((t) => t.offset === item.offset) === idx
+      })
       .map((item) => ({
         ...item,
         searchTerms: allOptions
           .filter((t) => t.offset === item.offset)
           .map((t) => t.label)
           .join(" "),
       }))
-  }, [allOptions])
+  }, [allOptions, customTimezoneKeys])
 
   const filterOption = (option: { label: string; value: string; data: ITimezone }, inputValue: string): boolean => {
     const data = option.data as ITimezoneOption

src/tests/TimezoneSelect.spec.tsx

@@ -61,6 +61,23 @@ test("load and displays custom timezone", async () => {
   expect(getByText(/\(GMT-[5-6]:00\) Pittsburgh$/)).toBeInTheDocument()
 })
 
+test("custom timezone key not in default list is not deduped from dropdown", async () => {
+  const { getAllByText } = render(
+    <TimezoneSelect
+      value={"America/Detroit"}
+      timezones={{
+        ...allTimezones,
+        "America/Detroit": "Detroit",
+      }}
+      menuIsOpen={true}
+      onChange={(e) => e}
+    />,
+  )
+
+  // Detroit should appear in both the selected value and as a dropdown option
+  expect(getAllByText(/Detroit/).length).toBeGreaterThanOrEqual(2)
+})
+
 test("load and passes react-select props", async () => {
   const { getByText } = render(
     <TimezoneSelect