createRef для элемента внутри динамического c компонента является нулевым

Question

Я использую antd (https://ant.design/components/form/). У меня есть Form внутри Modal, и в конструкторе создается ref для формы.

Когда я открываю модальное поле, я пытаюсь сбросить поля, следуя этому примеру: https://codesandbox.io/s/ddtxj. Когда я нажимаю на кнопку, которая открывает модальное окно, я вызываю onReset, как показано в примере.

Но я получаю Uncaught TypeError: Cannot read property 'resetFields' of null.
Когда я console.log(this.addCustomerFormRef); Я вижу {current: null}

Я думаю, что ссылка пуста, потому что модал / форма еще не существует в DOM ... или что-то в этом роде. Это работает, когда я выполняю setTimeout для моего onReset() метода.

Может кто-нибудь сказать мне правильный способ сброса полей в форме?

конструктор:

this.addCustomerFormRef = React.createRef();

Кнопка для открытия модального режима:

 <Button type="primary" 
     onClick={() => { this.handleFormFieldsReset(); this.setState({ addModalVisible: true }) }}>
   Add Customer
 </Button>

Метод сброса формы:

handleFormFieldsReset = () => {
    setTimeout(() => {
        this.addCustomerFormRef.current.resetFields(); //works with setTimeout
    }, 2000);
}