Added useFormat hook to format special values.

components/metrics/CountriesTable.js

@@ -1,8 +1,7 @@
 import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import useCountryNames from 'hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
-import useMessages from 'hooks/useMessages';
+import { useLocale, useMessages, useFormat } from 'hooks';
 import MetricsTable from './MetricsTable';
 
 export function CountriesTable({ websiteId, ...props }) {
@@ -10,6 +9,7 @@ export function CountriesTable({ websiteId, ...props }) {
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatCountry } = useFormat();
 
   function renderLink({ x: code }) {
     return (
@@ -17,7 +17,7 @@ export function CountriesTable({ websiteId, ...props }) {
         id="country"
         className={locale}
         value={countryNames[code] && code}
-        label={countryNames[code]}
+        label={formatCountry(code)}
       >
         <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
       </FilterLink>