I've copied and modified a react-bootstrap Popover from the examples provided here, but it's not yet working properly. The button renders correctly, but when I click it to display the popover, I get an error saying "Element type is invalid: expected a string [...] or a class/function [...] but got: undefined. You likely forgot to export your component [...]".

Can anyone see what's causing this issue?

import {Button, OverlayTrigger, Popover} from "react-bootstrap";
// ...
renderColumnOptionsButton() {
  return (
    <OverlayTrigger
      trigger="click"
      placement="left"
      overlay={
        <Popover>
          <Popover.Header as="h3">
            Choose which columns to display:
          </Popover.Header>
          <Popover.Body>
            options will go here
          </Popover.Body>
        </Popover>
      }
    >
      <Button variant="secondary">Column Options</Button>
    </OverlayTrigger>
  );
}
// ...
render() {
  // ...
    {this.props.allowColumnSelection &&
      {this.renderColumnOptionsButton()}
    }
  // ...
}

Thanks in advance for your help!

EDIT:

I removed the Popover element from the overlay prop and replaced it with <text>hello</text>, and the overlay worked just fine. This means the issue is definitely coming from handing the Popover element to the OverlayTrigger.

I realized that the Popover requires an id prop, but when I provide one the tag gets underlined by WebStorm and tells me Type JSX.element is not assignable to type PropTypes.Requireable[...].

I tried removing the Popover and placing it in a const, both with const popover = (...) and const popover = () => (...), along with <OverlayTrigger ... overlay={popover}> and neither of those work either, but they don't give that WebStorm tooltip on the id prop anymore. I still have it set up with the latter form, and currently the line overlay={popover} is underlined and WebStorm again tells me Type function is not assignable to type PropTypes.Requireable[...].

I'm doing it just like in the examples, but the overlay prop of OverlayTrigger seems to not like anything I give to it. What am I doing wrong?

EDIT 2:

I figured out the issue! I'm actually using react-bootstrap v4 and instead of <Popover.Header> and <Popover.Body>, it uses <Popover.Title> and <Popover.Content>. Swapping those out fixed the issue.