Updated the CountrySelect

src/components/Low/CountrySelect.tsx

@@ -2,6 +2,7 @@ import {countries, TCountries} from "countries-list";
 import {Fragment, useState} from "react";
 import {Combobox, Transition} from "@headlessui/react";
 import {BsChevronExpand} from "react-icons/bs";
+import countryCodes from "country-codes-list";
 
 interface Props {
 	value?: string;
@@ -10,7 +11,9 @@ interface Props {
 
 const mapCountries = (codes: string[]) => {
 	return codes.map((code) => ({
-		label: countries[code as unknown as keyof TCountries].name,
+		label: `${countryCodes.findOne("countryCode" as any, code).flag} ${countries[code as unknown as keyof TCountries].name} (+${
+			countries[code as unknown as keyof TCountries].phone
+		})`,
 		code,
 	}));
 };
@@ -35,7 +38,11 @@ export default function CountrySelect({value, onChange}: Props) {
 						<Combobox.Input
 							className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 							onChange={(e) => setQuery(e.target.value)}
-							displayValue={(code: string) => countries[code as unknown as keyof TCountries].name}
+							displayValue={(code: string) => {
+								const country = countries[code as unknown as keyof TCountries];
+
+								return `${countryCodes.findOne("countryCode" as any, code).flag} ${country.name} (+${country.phone})`;
+							}}
 						/>
 						<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
 							<BsChevronExpand />