React i18next - Custom formatter doesn't work - internationalization

Question

I'm using ICU format and would like to add a custom formatter that will lowercase a string.
To do so I've used this configuration
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from "./locales/en/translation.json"
import LanguageDetector from 'i18next-browser-languagedetector';
import ICU from 'i18next-icu';
i18n
.use(LanguageDetector)
.use(ICU)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
initImmediate: false,
resources: {
en: enTranslation
},
lng: "en", // if you're using a language detector, do not define the lng option
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
}
});
i18n.services.formatter?.add("lowercase", (value, lng, options) => {
return value.toLowerCase();
});
export default i18n;
I load this configration into my index.tsx
import './i18n';
translation.json
{
"translation": {
"custom-format": "Example {value, lowercase}."
}
}
If I try and use this message it just prints out the options. E.g.
// Prints as "Example {value, lowercase}."
<Trans i18nKey="custom-format" values={{value: "MiXtUrE"}}/>
I've checked if the formatter exists in the i18next object and it does. It is however missing its name.
Why won't it use the custom formatter?