ReactJS：将Tippy按钮的位置设置为顶部会导致错误

Question

我正在尝试使小费出现在光标上方。现在，当鼠标出现时（悬停时），我会收到此错误：

TypeError: placement.indexOf is not a function in node_modules/popper.js/dist/esm/popper.js:683

在错误发生之前，我在codemirror编辑器下面看到了一个截断的巨大提示（尽管我将其扭曲在顶部）。

但是，在我的sandbox中，它不会出错。但是，它确实为您提供了一大堆小费（同样，您可以说出它是一个很大的小费），可以将代码行中的单词分开。这是一张图片：

代码：

import React from "react";
import ReactDOM from "react-dom";
import Tippy from '@tippy.js/react';
/* eslint no-restricted-globals: "off"*/

var codeSample = `
openssl rand -base64 756 > keyfile.txt
chmod 400 keyfile.txt`


class App extends React.Component {
  state = {
    valueTitle: "Hello"
  };

  constructor() {
    super();
    this.instance = null;
    this.tippyInstance = null;
  }

  storeTippyInstance = instance => {
    this.tippyInstance = instance
  }
  _onMouseMove(e) {

    var node = event.srcElement;
    //const tippyInstance = useRef()

    console.log(event.target)
    if ( ['cm-variable', 'cm-number', 'cm-operator', 'cm-builtin', 'cm-attribute'].includes(event.target.className)) {
      this.tippyInstance.setContent(node.innerText);
      this.tippyInstance.set({appendTo: event.target, placement:top})
    }
    else{

    }
  }

  render() {
    const { valueTitle, tippyInstance, instance } = this.state;
    const props = {}
    //const tippyInstance = useRef()


    return (
     <div key="migraine">
      <Tippy
        key="pop"
        content=""
        onCreate={this.storeTippyInstance}
        placement="top"
        followCursor="true">
      <div key= "hitomato" onMouseMove={this._onMouseMove.bind(this)}>
        <CodeMirror
        key="shit"
          value= {codeSample}
          options={{
            mode: "shell",
            theme: "material",
            lineNumbers: true
          }}
          editorDidMount={editor => {
             this.instance = editor

          }}
        />
        </div>
      </Tippy>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

export default App;