如何通过代码修改input/select值时触发表单的onChange事件

我需要找到一种无需用户直接操作就能触发表单onChange事件的方案，以下用React代码举例说明我的具体场景：

自定义DropDown组件 #

function DropDown() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const selectRef = useRef()

  useEffect(() => {
    selectRef.current.value = selectedPerson.id
  }, [selectedPerson])

  return (
    <>
      <Listbox value={selectedPerson} onChange={setSelectedPerson}>
        {({ open, disabled, value }) => {
          console.log()
          return (
            <div>
              <Listbox.Button as="div">
                <span>{selectedPerson.name}</span>
              </Listbox.Button>
              <Listbox.Options static style={{ display: open ? 'block' : 'none' }}>
                {people.map(person => (
                  <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
                    {person.name}
                  </Listbox.Option>
                ))}
              </Listbox.Options>
            </div>
          )
        }}
      </Listbox>
      <div>
        <select ref={selectRef} name="test" id="">
          {people.map(person => (
            <option key={person.id} value={person.id}>
              {person.name}
            </option>
          ))}
        </select>
      </div>
    </>
  )
}

其中的原生select会被隐藏，仅用于尝试触发组件外层表单的onChange事件，外层App组件代码如下：

外层App组件 #

import DropDown from './DropDown'
import './App.css'

function App() {
  const onChange = ev => {
    console.log(ev)
  }
  return (
    <div className="App">
      <form onChange={onChange}>
        <DropDown />
      </form>
    </div>
  )
}

export default App

目前我已经通过useEffect成功修改了select组件的选中值，但希望能达到和用户直接操作select一样的效果——触发表单的onChange事件。需要说明的是，我不想通过Props Drilling将onChange函数传递给DropDown组件，请问有没有实现该需求的方法？

内容的提问来源于stack exchange，提问作者Pastilhas