I've followed the next intl official documentations step by step, the i18n works perfectly in server components, however for the life of me i can't figure out how do it in a client component? It keeps returning Error: MISSING_MESSAGE: Could not resolve on_the_go in messages for locale en for all keys.

I have a complex application so I don't want to pass keys from Server components to Client as i feel like it'd just be messy if a client components needs 30-40 keys.

Example:

"use client"
import { useEffect, useState } from 'react';
import NavigationLink from 'components/NavigationLink';
import { LiaCompass } from "react-icons/lia";
import { MdTravelExplore } from "react-icons/md";
import {useTranslations} from 'next-intl';

export default function BottomNavigation() {

    const t = useTranslations();

    return (
        <div className="pt-14">
    
    
                <NavigationLink href={`/`} className='flex flex-row btm-nav-label font-medium' >
                    <LiaCompass size="26"> </LiaCompass>{t('discover')}
                </NavigationLink>
                <NavigationLink href={`/onthego`}  className='flex flex-row btm-nav-label font-medium'>
                    
                   <MdTravelExplore size="24" />{t('on_the_go')}
                </NavigationLink>
            
        </div>
    )
}