Сосредоточить дочерний компонент на монтаже

Question

Я хочу создать контролируемое меню. Если focused Индекс передается, меню должно автоматически фокусировать соответствующую опцию при монтировании. Для этого я реализовал следующее.

export default class Option extends Component {
  componentDidMount() {
    // The focus appears only on calling force update
    // this.forceUpdate();
  }

  render() {
    // focus the second option
    return (
      <div className="menu">
        {props.options.map((o, index) => (
          <Option focused={index === 1}>{o.label}</Option>
        ))}
      </div>
    );
  }
}

export default class Option extends PureComponent {
  constructor(props) {
    super(props);

    this.optionRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.focused) {
      this.optionRef.current.focus();
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.focused) {
      this.optionRef.current.focus();
    }
  }

  render() {
    return (
      <div
        tabIndex={-1}
        ref={this.optionRef}
        onClick={this.props.onClick}
      >
        {this.props.children}
      </div>
    );
  }
}

Однако опция не фокусируется на монтировании. Я вынужден обновить меню, чтобы вызвать componentDidUpdate, что заставляет опцию быть сосредоточенным. Есть ли более чистый способ обойти это (кроме размещения всех ссылок в компоненте меню)?