सिमेंटिक यूआई प्रतिक्रिया - ड्रॉपडाउन चयन पर पॉपअप लागू करें

मेरे पास semantic-ui-react का उपयोग करके कुछ विकल्पों के साथ एक ड्रॉपडाउन है। मैं उपयोगकर्ता को ड्रॉपडाउन से चयन के बाद किए गए विकल्प पर एक संक्षिप्त विवरण दिखाने में सक्षम होना चाहता हूं। सिमेंटिक में एक <Popup/> मॉड्यूल भी है जिसका मैं प्रयास कर रहा था इस काम को करने के लिए <Dropdown/> के साथ प्रयोग करें।

मैं ड्रॉपडाउन मॉड्यूल की प्रोप सूची देख रहा हूं और विशेष रूप से कुछ भी नहीं देखता जो मेरे मामले में फिट बैठता है। मैंने पॉपअप के अंदर ड्रॉपडाउन का उपयोग करने की कोशिश की है, लेकिन बिना किसी किस्मत के।

उदाहरण के साथ सैंडबॉक्स: https://codesandbox.io/s/5zo52qyrxk

import React from "react";
import ReactDOM from "react-dom";
import { Dropdown, Popup, Input } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

import "./styles.css";

const offsetOptions = [
  {
    text: "fromEarliest",
    value: "fromEarliest"
  },
  {
    text: "fromLatest",
    value: "fromLatest"
  }
];

const DropdownExample = () => (
  <Dropdown
    placeholder="Select offset position"
    clearable
    fluid
    selection
    options={offsetOptions}
    header=" Something about offset "
  />
);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      offset: ""
    };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <fieldset>
            <h1> Implement Popup on this Dropdown - semantic ui </h1>
            <DropdownExample />
          </fieldset>
        </div>
      </form>
    );
  }
}

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