How to add onClick to button as contentEditable div inner contents

I am using react-contentEditable package from npm. When my user clicks a contact, I want to show a nice label, name, and also a button to remove this label from the editable div if the user wants.

I have the label and name figured out, but I cant seem to understand how to pass the onClick to a button when it is rendered like this below

`<label contentEditable="false" class="p-1 rounded-capsule">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button></label>`)) // How do I pass an onClick to the button?

Here is the full component

import React, { useState, useRef, useEffect, Fragment } from 'react';
import ContentEditable from 'react-contenteditable';


const [toField, setToField] = useState({value: " ", html: " "})
const toFieldRef = useRef()

const addContactsToDiv = () => {
    let selectedContactsArray = [] // create and empty array
    const Matches = selectedRows.filter((row) => {
      const isMatched = contacts.some(contact => { if(contact._id == row) {
        selectedContactsArray.push({firstName: contact.firstName, lastName: contact.lastName, phone_number:contact.phone_number, _id: contact._id})
      }})
      return isMatched
    })
    const matchedContactsArray = []
    selectedContactsArray.map(contact => { // mapping over selected to add html 

// How can I add an onClick to the button when I have to pass it as string?
      matchedContactsArray.push((`<label contentEditable="false" class="p-1 font-weight-bold bg-primary ml-2 text-white rounded-capsule shadow-none fs--3">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button><span name="indy-contacts" class="d-none">${contact._id}</span></label>`))
    })
    matchedContactsArray.map(contact => { return contact})
     const stringifiedRows = matchedContactsArray.toString() // push stringified results in to array
     setToField({...toField, html: stringifiedRows}) // update state with array instead of updating state inside loop
    
  }

 <ContentEditable
         name="to"
         innerRef={toFieldRef} // passing our ref instead of state
         html={toField.html} // the html = our ref.current property
         //value={toField}
         onBlur={handleBlur}
         onClick={() => {handleClick()}}
         onChange={handleChange} // this sets our refs.current = event.target.value
         style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
         className="border border-2x border-300 bg-light rounded-soft fs-1"
         >
         </ContentEditable>