Country name, 404

frontend/pages/vendors/[slug]/index.js

@@ -2,6 +2,7 @@ import { Link } from '@chakra-ui/next-js'
 import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
 import { FaFacebookSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa'
 import { TbWorldWww } from 'react-icons/tb'
+import { iso31661 } from 'iso-3166'
 
 export const getStaticPaths = async () => {
   const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
@@ -34,7 +35,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
     data: [vendor],
   } = await res.json()
 
-  return { props: vendor }
+  return { props: { ...vendor, country: iso31661.find((iso) => iso.alpha3 === vendor.country)?.name || '' } }
 }
 
 export default function VendorPage(vendor) {
@@ -84,12 +85,7 @@ export default function VendorPage(vendor) {
                 <br />
               </>
             )}
-            {vendor.country && (
-              <>
-                {vendor.country}
-                <br />
-              </>
-            )}
+            {vendor.country && <>{vendor.country}</>}
           </Text>
         </Box>
         <Box>