title: antd modal on modal click not opening
body: <p>I have an <strong>antd modal</strong> as shown in the below code, Now when I select <code>Create Manual</code> and click <code>Next</code>, <code>I want to close this modal and open another Modal2</code> but another modal is not getting opened after clicking next.</p>
  <p>Here is my code. ( Codesandbox live demo - <a href="https://codesandbox.io/s/basic-antd4103-forked-ixffq?file=/index.js" rel="nofollow noreferrer">link</a> )</p>
  <p>Please suggest a workaround to get his second modal generated. Thanks</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;antd/dist/antd.css&quot;;
  import &quot;./index.css&quot;;
  import { Modal, Button, Radio } from &quot;antd&quot;;
  
  const App = () =&gt; {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [selectRadio, setselectRadio] = useState(&quot;preselect&quot;);
    const showModal = () =&gt; {
      setIsModalVisible(true);
    };
    const select = (e) =&gt; {
      // you can save the value in here
      setselectRadio(e.target.value);
      console.log(e.target.value);
    };
    function modalclick() {
      if (selectRadio === &quot;preselect&quot;) {
        alert(&quot;pre-select&quot;);
      } else {
        //---------------&gt; UNABLE TO OPEN ANOTHER MODAL HERE   &lt;-------------------------------------
        &lt;Modal title=&quot;Create Test Suite&quot; visible={isModalVisible}&gt;
          MODAL 2 COMES HERE
        &lt;/Modal&gt;;
        alert(&quot;manual&quot;);
      }
    }
  
    return (
      &lt;&gt;
        &lt;Button type=&quot;primary&quot; style={{ float: &quot;right&quot; }} onClick={showModal}&gt;
          Create Test Suite
        &lt;/Button&gt;
        &lt;Modal
          title=&quot;Create Test Suite&quot;
          visible={isModalVisible}
          footer={[
            &lt;Button key=&quot;cancel&quot; onClick={() =&gt; setIsModalVisible(false)}&gt;
              Cancel
            &lt;/Button&gt;,
  
            &lt;Button type=&quot;primary&quot; key=&quot;next&quot; onClick={modalclick}&gt;
              Next
            &lt;/Button&gt;
          ]}
        &gt;
          &lt;Radio.Group
            defaultValue=&quot;preselect&quot;
            buttonStyle=&quot;solid&quot;
            onChange={(e) =&gt; {
              select(e);
            }}
          &gt;
            &lt;Radio value=&quot;preselect&quot;&gt;Create from Preselect&lt;/Radio&gt;
            &lt;Radio value=&quot;manual&quot;&gt;Create Manual&lt;/Radio&gt;
          &lt;/Radio.Group&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;container&quot;));
  </code></pre>