使用reactjs-popup包裹组件时出现React组件未定义错误（已解决）

问题场景 #

小组项目中使用reactjs-popup实现弹窗功能，原本单独使用<UsernameForm />组件的代码可以正常运行：

import UsernameForm from "./UsernameForm";
function RoomContainer() {
  // ...
  return (
    // ...
    <div>
      <UsernameForm
        inputtedUsername={inputtedUsername}
        setInputtedUsername={setInputtedUsername}
      />
    </div>
  );
}

但将<UsernameForm />包裹到<Popup>组件中后，出现React类型错误：

import UsernameForm from "./UsernameForm";
import Popup from "reactjs-popup";
function RoomContainer() {
  //...
  return (
    <div>
      {/* ... */}
      <Popup trigger={/* something to trigger the pop up window */}>
        <UsernameForm
          inputtedUsername={inputtedUsername}
          setInputtedUsername={setInputtedUsername}
        />
      </Popup>
    </div>
  );
}

错误信息：

React.createElement：类型无效——期望是字符串（对应内置组件）或类/函数（对应复合组件），但得到：undefined。你可能忘记从组件定义文件中导出组件，或者混淆了默认导入和命名导入。

尝试在导入时添加{}，问题未解决。

问题解决 #

排查后发现，reactjs-popup的trigger={}是预设工具，仅支持按钮类触发元素。自行编写了Popup组件后，问题修复。

内容的提问来源于stack exchange，提问作者Heidi L.