How to use the @hint/utils-i18n.getCategoryName function in @hint/utils-i18n

public constructor(name: string, url: string, isScanner: boolean, language?: string) {
        this.hints = [];
        this.passed = [];
        this.name = name;
        this.localizedName = getCategoryName(name.toLowerCase() as Category, language);

        this.hintsCount = 0;

        this.image = categoryImages[name.toLowerCase()];
        this.isScanner = isScanner;

        if (this.image && !isScanner) {
            this.image = this.image.substr(1);
        }

        this.status = 'finished';
        this.url = url;
    }

useEffect(() => {
        const disabledCategories = config.disabledCategories || [];
        const browserslists = config.browserslist || '';
        const ignoredUrls = config.ignoredUrls;

        let body = template
            .replace('__webhint version:__', `__webhint version:__ ${version}`)
            .replace('__Browser version:__', `__Browser version:__ ${navigator.userAgent}`)
            .replace('[x] Recommended settings', `[${!browserslists ? 'x' : ' '}] Recommended settings`)
            .replace('[ ] Custom: ', `[${browserslists ? 'x' : ' '}] Custom: ${browserslists ? browserslists : ''} `);

        for (const category of categories) {
            body = body.replace(`[x] ${getCategoryName(category)}`, `[${disabledCategories.includes(category) ? ' ' : 'x'}] ${getCategoryName(category)}`);
        }

        if (error) {
            body = body.replace('', `${error.message}\n${error.stack}`);
        }

        const getLocation = async () => {
            const loc = await evaluate('window.location');
            const origin = loc.origin;
            const noIgnored = ignoredUrls === undefined;
            const isSameOrigin = !noIgnored && (ignoredUrls === '--webhint-third-party' || ignoredUrls === `^(?!${escapeRegExp(origin)})`);
            const isCustom = !noIgnored && !isSameOrigin;

            body = body.replace('[x] None', `* [${noIgnored ? 'x' : ' '}] None`)
                .replace('[ ] Different origin', `* [${isSameOrigin ? 'x' : ' '}] Different origin`)
                .replace('[ ] Custom: ', `* [${isCustom ? 'x' : ' '}] Custom: ${isCustom ? ignoredUrls : ''} `);

const categoryInputs = categories.map((category) => {
        const isDisabled = disabled && disabled.includes(category);

        return (
            
                
                
                    {getCategoryName(category)}
                
            
        );
    });

const Category = ({ name, hints, showPassed }: Props) => {
    const shownHints = hints.filter((hint) => {
        return showPassed || hint.problems.length > 0;
    });

    return (
        <div>
            <div id="{`results-category-${name}`}">
                <span>
                    {getCategoryName(name)}
                </span>
            </div>
            <div>
                {shownHints.map((hint) =&gt; {
                    return ;
                })}
            </div>
        </div>
    );
};

const CategorySummary = ({ name, hints, passed }: CategoryResults) => {
    let statusStyle = '';

    if (passed < hints.length) {
        statusStyle = hasError(hints) ? styles.error : styles.warn;
    }

    return (
        <a data-icon="{name}" href="{`#results-category-${name}`}">
            {getCategoryName(name)}
            <span>{hints.length - passed}</span>
        </a>
    );
};