ReactJS – замена первого вхождения строкового шаблона пользовательским компонентом

У меня есть несколько строк с этим форматом:

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

Я хочу отобразить эту строку в своем пользовательском интерфейсе и заменить каждое вхождение [custom: text] текстовым полем. Мой CustomComponent реализует текстовое поле с заполнителем. Я хочу, чтобы заполнителем был текст, который находится между «[custom:» и закрывающей квадратной скобкой.

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

Я даже пытался сопоставить только одно вхождение, удаляя '/g' в конце регулярного выражения, но все равно все вхождения заменяются

Это мой код:

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>
    );