Заменить открывающий и закрывающий тексты открывающими и закрывающими компонентами

Question

У меня есть строка вроде: I agree with the <link>Privacy Policy</link> & <link>Terms of Use</link>;

Я пытаюсь преобразовать ее в

I agree with the <Button onClick={..}>Privacy Policy</Button onClick={..}> & <Button>Terms of Use</Button>;

Ожидаемый результат:

Что я пробовал до сих пор

После прохождения различных ресурсов на inte rnet Я реализовал этот метод:

const updateLinks = ({content, component: Component}) => {
  const linkTexts = content.match(/<link>(.*?)<\/link>/g);
  const updatedLinkTexts = linkTexts.map(text => {
    const innerText = /<link>(.*?)<\/link>/g.exec(text);
    return <Button onClick={() => console.log("working")}>{innerText[1]}</Button>;
  });
  // Logic for non-link content
  return updatedLinkTexts;
}

Результат попытки:

Я также могу добавить некоторые беспорядочные строки кода, чтобы добавить оставшееся не связанное содержание. Но я ищу более элегантные решения, в противном случае я могу использовать последнюю опцию для более запутанных строк кода.

Примечание: Использование регулярных выражений является необязательным. Решения без регулярных выражений также хороши.

Не стесняйтесь комментировать для разъяснений, если это необходимо.