how to make a mermaid script interactive

Question

This is my code to render mermaid script

import mermaid from "mermaid";

mermaid.initialize({
  startOnLoad: true,
  theme: "default",
  securityLevel: "loose",
  fontFamily: "Fira Code",
  htmlLabels: true
});


export default function App() {

  const chart = `sequenceDiagram
  Warehouse->>Customer: getWarehouse()
  Customer-->>ChatBot: getCustomer()
  Customer--x WarehouseKey: getChatBot()
  Customer-x ChatBot: getUser()
  Note right of ChatBot: Customer thinks a long long time, so long that the text does not fit on a row.
  Customer-->Warehouse: Checking with ChatBot...
  WarehouseKey->ChatBot: Yes... ChatBot, how are you?
  `;

    return (
      <div
        className="mermaid"
      >
        {chart}
      </div>
    );
}

My use case is, if you take the above script, when i hover over Warehouse text, i want to indicate it is clickable by adding cursor:"pointer"The workaround i tried is I added the following css

.actor > tspan {
  cursor: pointer;
}

.messageText {
  cursor: pointer;
}

.noteText > tspan {
  cursor: pointer;
}

It made all the texts in mermaid chart clickable .cursor pointer came. but i don't want for all texts , I want for specific texts to be clickable. how to do that?