React Hooks: useContext возвращает неопределенное значение в функции

Question

У меня есть небольшая библиотека провайдера локализации, которая выполняет звонки на сервер для получения переводов на основе выбранного языка пользователя. Для краткости я опустил несколько вспомогательных функций. Вот суть этого:

const LocaleContext = createContext();

const LocaleProvider = ({ children }) => {
  const [state, setState] = useState(defaultValues);
  if (state.phrases === null) {
    changeLanguage(defaultLanguage);
  }

  return (
    <LocaleContext.Provider value={[state, setState]}>
      {children}
    </LocaleContext.Provider>
  );
};

const changeLanguage = (lang) => {
  const [state, setState] = useContext(LocaleContext);
  fetch(localizationEndpointForThatLanguage)
    .then(response => response.json())
    .then(data => {
      setState({ ...state, phrases: data });
};

const translateString = (string) => {
  const [state] = useContext(LocaleContext);
  // if the string argument is found in state, return the translated value;
}

export { LocaleContext, LocaleProvider, changeLanguage, translateString };

Вот компонент, который его использует:

const Home = () => {
  const [state, setState] = useContext(SiteContext);

  useEffect(() => {
    state.fetchContent(opts, state, setState);
  }, []);

  return (
    <div>
      {state.data && state.data.map((datum) => <div>{datum.title}</div>)}
      <div onClick={() => changeLanguage('pl_PL')}>Change to Polish</div>
      <div>{changeLanguage('Translate me')}</div>
    </div>
  );
};

Код дает мне ошибку "Ошибка типа: Не удается прочитать свойство '0' из неопределенногоmsgstr "при попытке деструктурировать LocaleContext в функции changeLanguage. Он отлично работает для функции translateString. Это работает, если я вручную передаю состояние в функцию changeLanguage.

const Home = () => {
  const [state, setState] = useContext(SiteContext);
  const [locale, setLocale] = useContext(LocaleContext);

  useEffect(() => {
    state.fetchContent(opts, state, setState);
  }, []);

  return (
    <div>
      {state.data && state.data.map((datum) => <div>{datum.title}</div>)}
      <div onClick={() => changeLanguage('pl_PL')}>Change to Polish</div>
      <div>{changeLanguage('Translate me', locale, setLocale)}</div>
    </div>
  );
};

и

const changeLanguage = (lang, state, setState) => {
  fetch(localizationEndpointForThatLanguage)
    .then(response => response.json())
    .then(data => {
      setState({ ...state, phrases: data });
    });
};

У меня все в порядке с передачей значений контекста по всему приложению, чтобы все работало. Я хотел бы помочь понять, почему моя функция translateString не требует, чтобы я передавал ей значения контекста.