feat: add country flags to country code selection

src/features/authentication/components/CountryCodeSelector.tsx

@@ -10,6 +10,7 @@ import {
 import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
 import { countries, type Country } from '../data/countries';
 import { ArrowDown2 } from 'iconsax-reactjs';
+import ReactCountryFlag from 'react-country-flag';
 
 interface CountryCodeSelectorProps {
   show: boolean;
@@ -152,7 +153,16 @@ export function CountryCodeSelector({
             selected={country.phone === value}
             onClick={() => handleSelect(country)}
           >
-            <ListItemIcon>{country.flag}</ListItemIcon>
+            <ListItemIcon>
+              <ReactCountryFlag
+                countryCode={country.code}
+                svg
+                style={{
+                  height: '1.125rem',
+                  width: '1.125rem',
+                }}
+              />
+            </ListItemIcon>
             <ListItemText primary={country.label} />
             <Typography color="text.secondary">{country.phone}</Typography>
           </MenuItem>