fix: merge errors

src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx

@@ -8,10 +8,10 @@ import {
   Autocomplete,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { countries } from '@/features/profile/data/countries';
-import { CountryFlag } from '@/components/CountryFlag';
+import { countries } from '@/data/countries';
 import { Gender } from '@/features/profile/types/settingsType';
 import { type InfoRowEditProps } from '@/features/profile/types/settingsType';
+import ReactCountryFlag from 'react-country-flag';
 
 export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
   const { t } = useTranslation(['countries', 'setting']);
@@ -101,7 +101,17 @@ export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
         }
         renderOption={(props, option) => (
           <Box component="li" {...props} key={option.code}>
-            <CountryFlag code={option.code} />
+            <ReactCountryFlag
+              countryCode={option.code}
+              svg
+              style={{
+                height: '1.5rem',
+                width: '1.5rem',
+                // TODO: Check alignment for better styling definition
+                marginTop: '-2px',
+                marginRight: '4px',
+              }}
+            />
             {option.label}
           </Box>
         )}