Dynamic content in CToasts shown with "send Toast" mechanism

[MatteoBuffo]

Hi! In my page I have a toaster where toasts are shown with the mechanism reported here, but with few additions.

const [toast, addToast] = useState(0)
const [testString, setTestString] = useState("foo")
const toaster = useRef()
const exampleToast = (
  <CToast autohide={false}>
    <CToastHeader closeButton>
      <svg
        className="rounded me-2"
        width="20"
        height="20"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid slice"
        focusable="false"
        role="img"
      >
        <rect width="100%" height="100%" fill="#007aff"></rect>
      </svg>
      <strong className="me-auto">CoreUI for React.js</strong>
      <small>7 min ago</small>
    </CToastHeader>
    <CToastBody>{testString}</CToastBody>
  </CToast>
)
return (
  <>
    <CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
    <CButton onClick={() => setTestString("bar")}>Change testString</CButton>
    <CToaster ref={toaster} push={toast} placement="top-end" />
  </>
)

Steps:

• click the "Send a toast" button;
• the toast that appears has "foo" in its body;
• click the "Change testString" button to make it "bar";
• the body of the already visible toast does not change, as it always shows "foo".

Am I missing something? Or is it something that has not been implemented yet?

Thanks.