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(
    eventKey,
    () => 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 (
    <Accordion.Toggle
      as={Card.Header}
      style={{ backgroundColor: isCurrentEventKey ? '#87CEEB' : '#00BFFF' }}
      onClick={decoratedOnClick}
    >
    {
      (isCurrentEventKey && <h3>Up arrow &#5169;</h3>) ||
      (!isCurrentEventKey && <h3>Down arrow &#5167;</h3>)
    }

    </Accordion.Toggle>
  );
}

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

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.