react-string-replace | simple way to safely do string replacement | Frontend Utils library

I have seen this question posted on here but none of the answers seem to be an actual Component or haven't worked so I am going to post my question and see if I missed anything.

I am making a blog with a body section for the use to add a story. I would like to have a special set of characters '{{21}}' in the body to indicate it should be replaced with a PhotoDeck component and pass in the photos from list 21. In my API I am able to parse the text, look for the marker, get the id, and add it to the api return as an array of objects:

I grab content from a CMS via Gatsby. Inside the markup there are placeholders which should be replaced with React elements.

So I get sth like this:

I have some text content that I am conditionally replacing with a link (#Hashtags and @mentions) using react-string-replace.

This is my string replace code direct from react-string-replace documentation.

I was trying to use the library react-string-replace as in React we have a limited way of using string replace method.

I was using trying to match some sub-string using regex as mentioned below as shown in the documentation but I am not able to get the desired result. Am I doing something wrong here?