Почему ref теряет ссылку на фактический элемент DOM?

Question

Как показано ниже, каждое событие onclick в CustomNode вызовет inputNode отправить событие Дом. Как-то подсказывает dispatchEvent is not a function, Кажется, ссылка не ссылается на правильный элемент DOM, как ожидалось. Насколько я знаю ReactDOM.createPortal делает компонент доступным к родительскому контексту, но почему в этом случае это не так? Кто-нибудь знает почему?

main.js

class Test extends React.Component {
  constructor(props){
    super(props)

  }
  renderModal() {
    let tpl = <div>
                <input ref={(node)=>{
                  this.input = node
                }} />    
                <CustomNode    
                  inputNode={this.input || {}}
                  keyboardType={"number"}
                  layouts={[NumberLayout]}
                />  
              </div>
     Dialog.confirm({
       content: tpl
     })


  }
  render() {
    const {isShow} = this.state

    if(isShow){
      this.renderModal()
    }
    return <div>  
                123                     
          </div>
  }
}
export default Test

CustomNode.js

class CustomNode extends PureComponent {


    onClick (key, type) {
        const {inputNode} = this.props;
        inputNode.dispatchEvent(new Event('input', {bubbles: true}));
    }

    render() {
        return <div onClick={this.onClick}></div>
    }
}

Dialog.js

  class Dialog extends React.Component {
    constructor(props) {
      super(props)
    }
    render{
      let {content} = this.props
       return ReactDOM.createPortal(
        <div>
          {content}
        </div>,
        document.body
      ); 
    }

  }


  static confirm(params) {
    const container = document.createElement("span");
    document.body.appendChild(container);
    return ReactDOM.render(<Dialog {...params} />, container);
  }


export default {
  confirm
}