Howto have a Semantic UI React Dropdown auto-focus when its parent component mounts?

I am using Semantic React UI's Dropdown, and I would like it to have focus as soon as its parent component mounts: the user should be able to search immediately.

I tried using a ref in render() of the parent:

<Dropdown ref={dd => (this.MyDropdown = dd)}
        ... />

...and then calling focus on it in the componentDidMount function of the parent component. But the Dropdown has no function focus, so this method won't work.

componentDidMount() {
    // I want to do something like the next line here, but 'focus' is not available on the component.
    //this.MyDropdown.focus();
  }

So what should I do instead?

Here is what I tried so far at codesandbox. Note the commented-out line in componentDidMount.