Ошибка: неверный вызов ловушки - куда его поставить?

Question

Я пытаюсь перевести приложение с Typescript на Javascript. Я наткнулся на этот ответный хук, который я не могу перевести, так как продолжаю получать ту же ошибку.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Я уже проверил свою версию React-Dom и это хорошо. А также я проверил, что у меня есть только одна копия реакции. Так что я могу исключить 2 из списка. То есть я каким-то образом нарушаю правила Крюков. Но не уверен, как это исправить.

Это мой код:

import { useContext } from 'react';
import { LocaleContext } from '../context/LocaleContext';
import strings from '../translations/strings';
import { defaultLocale } from '../translations/config';

export default function useTranslation() {

    const { locale } = useContext(LocaleContext);

    function t(key) {

        if (!strings[locale][key]) {
            console.warn(`Translation '${key}' for locale '${locale}' not found.`);
        }
        return strings[locale][key] || strings[defaultLocale][key] || '';
    }

    return { t, locale };
}

Кажется, моя проблема в:

const { locale } = useContext(LocaleContext);

Я уже пытался изменить функции и перемещая хук внутри функции t, но когда я это делаю, я получаю еще одну ошибку.

ReferenceError: locale is not defined

И код LocaleContext следующий:

export const LocaleContext = React.createContext({
    locale: 'en',
    setLocale: () => null
});

Для справки это учебник Я следую в Typescript.