I have a searchbar component that contains my dropdown in question. I am wanting to get the selections from the OnSelect value of the dropdown component and pass them to App.js to be used in the handler below.

App.js handler

 const [value, setValue] = useState("");
const dropdownHandler = (e) => {
  console.log(e);
  setValue(e);
};

Normally I would be able to set the onSelect method, to dropdownHandler directly, if the component was inside of App.js. However, I am unsure of how to do this when the components are modular.

Searchbar.js

 <DropdownButton className="dropdown"
      title="Search Filters"
      id="dropdown-menu"
      // onSelect={dropdownHandler}
    >
      <Dropdown.Item eventKey="ddFirstName">First Name</Dropdown.Item>
      <Dropdown.Item eventKey="ddLastName">Last Name</Dropdown.Item>
      <Dropdown.Item eventKey="ddTitle">Title</Dropdown.Item>
      <Dropdown.Item eventKey="ddPhoneNumber">Phone Number</Dropdown.Item>
      <Dropdown.Item eventKey="ddLocation">Location</Dropdown.Item>
    </DropdownButton>

App.js calling the searchbar component.

  <div className="centered-container">
      <Searchbar
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
        />
      </div>

What is the best way to pass the value from this dropdown back to App.js, so I can use the handler function I have written?