How to change the Header hrml of react bootstrap accordion when clicked

I have a React Bootstrap4 Accordion component that is working 90% correctly.

function ContextAwareToggle({ children, eventKey, callback }) {
  const currentEventKey = useContext(AccordionContext);

  const decoratedOnClick = useAccordionToggle(
    () => callback && callback(eventKey),

  const isCurrentEventKey = currentEventKey === eventKey;

  let toggleText;
  if (isCurrentEventKey) {
    toggleText = '<h3>Up arrow &#5169;</h3>'
  } else {
    toggleText = '<h3>Down arrow &#5167;</h3>'

  return (
      style={{ backgroundColor: isCurrentEventKey ? '#87CEEB' : '#00BFFF' }}
      (isCurrentEventKey && <h3>Up arrow &#5169;</h3>) ||
      (!isCurrentEventKey && <h3>Down arrow &#5167;</h3>)


return (
    <h2>Title: </h2> click on the arrow below.
    <Accordion defaultActiveKey="0">
          <ContextAwareToggle eventKey="0">
        <Accordion.Collapse eventKey="0">
            Accordion Body text

When I click the card.header, the show/hide action is correct. The background color of the header change is correct. However, the text in the header is shown as a literal text. I want the <h3> to be interpreted as an HTML tag instead of being displayed in plain text. I also want to show the HTML symbol for the Up and Down arrows instead of the whole ‘ᐯ’ being displayed as plain text.