如何在语义UI React中为每个datalist选项元素应用工具提示

import React from 'react';
import { Popup } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

const MyComponent = () => {
  const options = [
    { key: '1', text: 'Option 1', value: 'option1', tooltip: 'This is option 1' },
    { key: '2', text: 'Option 2', value: 'option2', tooltip: 'This is option 2' },
    { key: '3', text: 'Option 3', value: 'option3', tooltip: 'This is option 3' },
  ];

  return (
    <div>
      {options.map(option => (
        <Popup
          key={option.key}
          trigger={<span>{option.text}</span>}
          content={option.tooltip}
          position="top center"
          inverted
        />
      ))}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
};