Adding links to text in React I18next

I have a problem with I18next. I can’t figure out how to make links to websites work, here is my code:

import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";

const translationSwe = {
about: "Information",
example: "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>länk</a>"
}

const translationEng = {
about: "About"
example: "Example <br> <strong>text</strong>, here is <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>link</a>"
}

i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});

const App = () => {
const { t } = useTranslation();

return(
<Suspense fallback="Loading..">
<div className="app">
<p><Trans i18nkey="example"/></p>
</div>
</Suspense>
);
};

Line breaks & strong tags work fine, but link doesn’t. Instead of the link it prints just

<a>länk</a>

I have read some articles how to make links work, but in everyone of them data is in seperate JSON files. And in everyone of them you have to also insert the link from where you are calling the Trans component. I would like to just add text(which includes links etc) to translationSwe & translationEng without having to edit Trans component at all later, in case I decide to update or add links. How can I achieve this?