I am working on a SharePoint webpart and need to have a collapsible element that I can add a clickable element to. I have a complex class, so for simplicity's sake, I have created this example webpart that shows the issue. I have tried a number of different things, including things such as creating a component and then setting the triggerSibling property to that, setting it to just a string and adding the content of the const to the triggerSibling property directly. Here is my class.

import * as React from 'react';
import { IHelloWorldProps } from './IHelloWorldProps';
import Collapsible from 'react-collapsible';

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    const siblingContent = <div><a href="https://www.google.com" target="_blank">Clickable sibling content</a></div>;

    return (
      <Collapsible trigger="Collapsible example" triggerSibling={siblingContent}>
        <p>Some collapsible content</p>
      </Collapsible>
    );
  }
}

I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Am I doing something wrong? Or is there a better route I should consider for what I need to do?