Bot Framework Webchat links onclick in React - reactjs

Question

Because of other services that are integrated to the bot, we have to use HTML anchors instead of the markdown.
When there is a link, we dynamically switch it to the following code:
var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');
The goal is when the link is clicked, I sends the text content back to the bot as a response. The issue is that I cannot figure out how to catch the onclick event. Only thing it does when click is that it generates a seperate index.js in the page sources.
The base of the code I am using is a github webchat sample: Link
The code added that is important for the example (in MinimizableWebChat.js):
const MinimizableWebChat = (activityID, children) => {
const store = useMemo(
() =>
createStore({}, ({ dispatch }) => next => action => {
console.log(action.type);
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'initConversation',
value: {
language: window.navigator.language
}
}
});
} else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
if (action.payload.activity.from.role === 'bot') {
setNewMessage(true);
// action.payload.activity.text = action.payload.activity.text;
// action.payload.activity.text = ();
action.payload.activity.text = ParseLinks(action.payload.activity.text);
var atts = action.payload.activity.attachments;
if (atts){
atts.forEach(att => {
att.content.body.forEach(obj => {
obj.text = EmphasizeContent(obj.text);
})
});
}
}
}
return next(action);
}),
[]
);
const items = ["Hello World!", "My name is TJ.", "I am from Denver."];
var text = "asd";
// const click = () => {
// store.dispatch({
// type: 'WEB_CHAT/SET_SEND_BOX',
// payload: {
// text
// }
// });
// }
const ParseLinks = (text) => {
if(!text) return text;
text = String(text);
var a=[], i=-1;
// Search for *|, if found, find next * and substirng. Add html to each substring
while((i=text.indexOf("*|",i+1)) >= 0) {
var iA = text.indexOf("*", i+2);
var sub = text.substring(i,iA+1);
// var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');
var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');
text = text.replace(sub, newStr);
}
return text;
}
I tried catching it in the middleware store and directly in bot MinimizableWebChat.js and WebChat.js. I need somekind of hook to get the event from ReactWebChat in some way to interact with it in the middleware.
Fyi, pretty new to React, thanks for the help.