How can I make certain words highlighted in incoming text?

I am new to application development and working in React Native. I want the color of certain words in the text to be red and clickable like picture below. You can see the incoming data under the picture. The words in data.highlight should be red and clickable when first seen in the text. Although there are a few “dummy” as seen in the picture, only the first one is red. I tried to do this but couldn’t get it to a loop. Everything is constant when I do it. The incoming data may change and for example there may be more than 3 words in the data.highlight. How can I do this in a practical way?

const data = {
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, dummy when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    highlight: ["dummy", "standard", "since"]
}

enter image description here

import React from "react"
import { Text, View } from "react-native"


const data = {
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, dummy when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    highlight: ["dummy", "standard", "since"]
}


const WordBoxText = () => {

    // for first highlight word
    const convertData1 = data.text.split(data.highlight[0])
    let converted = []
    for (i = 1; i < convertData1.length; i++) {
        converted.push(convertData1[i])
    }
    const rest1 = converted.join(data.highlight[0]) // maybe it will useful
    const Highlighter = <Text style={{ color: "red" }}>{data.highlight[0]}</Text>


    // for first highlight word
    const convertData2 = data.text.split(data.highlight[1])
    let converted2 = []
    for (i = 1; i < convertData2.length; i++) {
        converted2.push(convertData2[i])
    }
    const rest2 = converted.join(data.highlight[1]) // maybe it will useful
    const Highlighter2 = <Text style={{ color: "red" }}>{data.highlight[1]}</Text>


    // for first highlight word
    const convertData3 = data.text.split(data.highlight[2])
    let converted3 = []
    for (i = 1; i < convertData3.length; i++) {
        converted3.push(convertData3[i])
    }
    const rest3 = converted.join(data.highlight[2]) //sentences from the last word
    const Highlighter3 = <Text style={{ color: "red" }}>{data.highlight[2]}</Text>


    const Final = () => {
        return (
            <Text>{
                convertData1[0]} {Highlighter}
                {convertData2[0]} {Highlighter2}
                {convertData3[0]} {Highlighter3} {rest3} </Text>
        )
    }

    return (
        <View style={{ marginTop: 100 }}>
            <Final></Final>
        </View>
    )
}

export default WordBoxText