src/pages/notFound/notFound.tsx

@@ -2,11 +2,15 @@ import React from 'react';
 import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 import { Player } from '@lottiefiles/react-lottie-player';
-import i18next from 'i18next';
 
 import animate from '../../assets/animation/notFound.json';
+import { useTranslation } from 'react-i18next';
 
 const NotFound = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash',
+  });
+
   return (
     <Center minH='100vh'>
       <VStack spacing={4} textAlign='center'>
@@ -21,12 +25,8 @@ const NotFound = () => {
             maxWidth: '450px',
           }}
         />
-        <Heading fontSize='xl'>
-          {i18next.t(`dry-wash.arm.notFound.title`)}
-        </Heading>
-        <Text fontSize='lg'>
-          {i18next.t(`dry-wash.arm.notFound.description`)}
-        </Text>
+        <Heading fontSize='xl'>{t(`notFound.title`)}</Heading>
+        <Text fontSize='lg'>{t(`notFound.description`)}</Text>
         <Button
           as={Link}
           to='/dry-wash'
@@ -34,7 +34,7 @@ const NotFound = () => {
           size='lg'
           variant='outline'
         >
-          {i18next.t(`dry-wash.arm.notFound.button.back`)}
+          {t(`notFound.button.back`)}
         </Button>
       </VStack>
     </Center>