FluentUI的TeachingBubble如何定位？

如何解决FluentUI的TeachingBubble如何定位？

确定TeachingBubble位置的一种方法是指定target作为TeachingBubble应该锚定到的元素的id。我对此不感兴趣。我希望我的教学泡泡位于它周围的 div 的中心（垂直和水平）。

我的部分代码：

const Onboarding1: React.FC<IOnboardingProps> = ({
  actionFunction = () => {},targetId = "",}) => {
  console.log("Passed target id is: " + targetId);

  return (
    <div
      id="Onboarding1Div"
      style={{
        display: "flex",justifyContent: "center",alignItems: "center",}}
    >
      <TeachingBubble
        headline="Welcome!"
        primaryButtonProps={{
          children: "Next",onClick: () => actionFunction(),}}
        styles={{
          footer: {
            display: "flex",},}}
      >
        <Text>hey</Text>
      </TeachingBubble>
    </div>
  );
};

我希望TeachingBubble 位于id ="Onboarding1Div" 的<div> 中间，但事实并非如此。生成的 html：

TeachingBubble 不在“Onboarding1Div”下。为什么？

从视觉上看，此页面如下所示：

我希望TeachingBubble 出现在我绘制的正方形中，位于页面的中心。