React Bootstrap 5 popover with HTML content

In React with Typescript I'm trying to get a working Bootstrap 5 popover with HTML content. The following code works with standard "text" content:

const popoverRef = useRef<HTMLAnchorElement | null>(null);

  useEffect(() => {
    const popover = new bootstrap.Popover(popoverRef.current as HTMLAnchorElement, {
      title: "Sample Title",
      content: "Some sample text content",
      trigger: 'click'
    })
  })

return (
   <a href="#" tabIndex={0} ref={popoverRef}>Popover Test</a>
)

But when I try to add HTML content:

const popContent = <span>Some sample <strong>HTML</strong> content</span>;

useEffect(() => {
    const popover = new bootstrap.Popover(popoverRef.current as HTMLAnchorElement, {
      title: "Sample Title",
      content: popContent,
      trigger: 'click'
    })
  })

I get the following error:

Type 'Element' is not assignable to type 'string | Element | JQuery | ((this: HTMLElement) => string | Element | JQuery) | undefined'.

I'm not sure how to resolve?