useTranslation always "not ready"

I have a HOC called

that looks like this:

const withTranslate = (Component) => (props) => {
  const { t } = useTranslation('version');

  return <Component {...props} t={t} />;
};

The idea is that sometimes I want to have dynamic descriptions to help users, to display different translation strings depending on what the value of the field is.

For example, I have a links that can either be external or internal pages. Internal pages use a relationship, and external is just a URL string. In the case that a user enters a URL for an external page that looks like it might be a page configured in the CMS, I want to prompt them with the description.

Using the withTranslate HOC then looks like this...

description: withTranslate(({ value, t }) =>
              Validator.internalUrl(value)
                ? t('custom:linkGroup.url.urlIsInternal')
                : t('custom:linkGroup.url.description')
            ),

However, it appears that

is always

. Even if I check for it like

, my translations don't appear, just the key string.

Any ideas why useTranslation might not be working here?

Solved... I had react-i18next version 12 installed in my dependencies, whereas payload has version 11