Changing React Component Based on Class Name

I am working on a project that keeps translations in a different repo than the React code that I am working on.

Here is an example of the translations:

<resources xmlns:its="http://www.w3.org/2005/11/its" locale="eng">
    <name its:translate="no">tranlsationName</name>
    <application its:translate="no">application-name</application>
    <version its:translate="no">3.0</version>
    <properties>
        <entry key="component">This entry needs a <a class="component">component</a> within the translation</entry>
    </properties>
</resources>

Previously, they were using a querySelectorAll to add an HTML component everywhere there was a class name of component. I am trying to update the pages to use React, but was told I need to still use these translation files. I have the ability to - minimally - adjust the translation files, but we are not able to put any React into the files.

Here is the code I have so far:

import { Info, Text3 } from "@internal-components";
import useTranslations from "app/hooks/useTranslations";
import Table from "./Table";

const MyComponent = ({ data, lang }) => {
    const translate = useTranslations();

    useEffect(() => {
        const changeToInfo = document.querySelectorAll('.component')
        for(var i = 0; i < changeToInfo.length; i++){
            console.log(changeToInfo[i]); // need to set this to Info component
        }
    }, [data]);

    return (
        <>
            <Text3><span dangerouslySetInnerHTML={{ __html: translate("tranlsationName.component", [lang]) }} /></Text3>
        </>
    );
};

export default MyComponent;

I am able to use the querySelectorAll to find the class, but I cannot figure out how to insert JSX. I know that a useRef or something would be preferable, but with the translations being so detached from the React repo, I'm not sure how I would be able to do that.

How do I add the Info component into my translations?

Thank you.