fix: 🐛 intl phone

Author: ianzone

bun.lockb

@@ -34,7 +34,7 @@
     "react-icons": "^5.4.0"
   },
   "peerDependencies": {
-    "antd": "^5.23.3",
+    "antd": "^5.23.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -58,17 +58,17 @@
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/coverage-v8": "^3.0.5",
     "ajv": "^8.17.1",
-    "biome-extends": "^1.1.0",
+    "biome-extends": "^1.2.0",
     "chromatic": "^11.25.2",
     "concurrently": "^9.1.2",
     "git-cz": "^4.9.0",
-    "happy-dom": "^16.8.1",
+    "happy-dom": "^17.0.0",
     "knip": "^5.43.6",
     "lefthook": "^1.10.10",
     "semantic-release": "^24.2.1",
     "storybook": "^8.5.3",
     "typescript": "^5.7.3",
-    "vite": "^6.0.11",
+    "vite": "^6.1.0",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.5",
     "wait-on": "^8.0.2",

package.json

@@ -1,17 +1,17 @@
 import { Space } from 'antd';
 import { CountryFlag } from 'src/components';
 import { useInputIntlPhoneContext } from '../InputIntlPhoneContext';
-import type { OptionRender } from './types';
+import type { Option } from './types';
 
-export const CountryRender: OptionRender = (props) => {
-  const data = props.data;
+export function CountryRender(props: { option: Option }) {
+  const option = props.option;
   const { customRegions } = useInputIntlPhoneContext();
-  const customEmoji = customRegions?.find((region) => region.value === data.value)?.emoji;
+  const customEmoji = customRegions?.find((region) => region.value === option.value)?.emoji;
 
   return (
     <Space>
-      <CountryFlag countryCode={data.value} emoji={customEmoji} width={24} />
-      {data.label}
+      <CountryFlag countryCode={option.value} emoji={customEmoji} width={24} />
+      {option.label}
     </Space>
   );
-};
+}

src/components/inputs/InputIntlPhone/CountrySelector/CountryRender.tsx

@@ -68,7 +68,7 @@ export function CountrySelector() {
       showSearch
       placeholder='Search Country'
       filterOption={filterOption}
-      optionRender={CountryRender}
+      optionRender={(opt, info) => <CountryRender option={opt.data} key={info.index} />}
       onSelect={onSelect}
       options={options}
       value={state.countryCode}