ReactJS – Replacing first occurrence of string pattern with custom component

I have a number of strings with this format:

'The model of that car is [assignment: any car model] and it has [assignment: any number] horsepower'

I want to display this string in my UI and replace every occurrence of [custom: text] with a textbox. My CustomComponent implements a textbox with a placeholder. I want the placeholder to be the text that comes between ‘[custom:‘ and the closing squared bracket.

I’m using reactStringReplace in order to replace string patterns with react components. The main problem is that reactStringReplace will replace every matching occurrence at the same time. Even if I match only the first occurrence, this will result in multiple checkboxes with the same placeholder.

I even tried to match only one occurrence removing ‘/g’ at the end of the regex but still all occurrences are replaced

This is my code:

const reactStringReplace = require('react-string-replace');

const description = 'The model of that car is [custom: any car model] and it has [custom: any number] horsepower'

function formatString(input){
    const regex =  /[assignment: (.*?)]/g;
    const regex_assignment =  /[assignment: (.*?)]/;
    let formattedString = input;
    let match;
    let placeholder;
    let newString = input;

    while ((match = regex.exec(input)) !== null) {
        placeholder = match[1];

        newString = reactStringReplace(newString,regex_assignment, ()=> (<CustomComponent placeholder={placeholder}/>))
    }

    return(newString);
}

return (
    <div class = 'description'>
        <div>{formatString(description)}</div>
    </div>
    );