title: Why is Ant Design's Modal component not updating upon parent's Table change?
body: <p>I'm struggling to have a <a href="https://ant.design/components/modal/" rel="nofollow noreferrer">Modal Component</a> closed when the mask (area outside the modal) is clicked.</p>
  <p>I have a Parent Component, which is a <a href="https://ant.design/components/table/" rel="nofollow noreferrer">Table Component</a>:</p>
  <pre><code>export default function App() {
    const [isModalVisible, setIsModalVisible] = useState(false);
  
    const columns = [
      {
        title: 'Tribunal/Sistema',
        dataIndex: 'court',
        key: 'court',
        filters: [...Array.from(new Set(data.map(item =&gt; ({text: item.court, value: item.court}))))],
        onFilter: (value: any, record: any) =&gt; record?.court?.includes(value),
        render: (text: string) =&gt; &lt;strong&gt;{text}&lt;/strong&gt;,
      },
      {
        title: 'Status',
        key: 'tags',
        dataIndex: 'tags',
        filters: [{text: 'coletado', value: 'coletado'}, {text: 'problema', value: 'problema'}],
        onFilter: (value: any, record: any) =&gt; record?.tags?.includes(value),
        render: (tags: string[]) =&gt; (
          &lt;&gt;
            {tags.map(tag =&gt; {
              let color = tag === 'problema' ? 'red' : 'green';
              return (
                &lt;Tag color={color} key={tag}&gt;
                  {tag[0].toUpperCase() + tag.slice(1)}
                &lt;/Tag&gt;
              );
            })}
          &lt;/&gt;
        ),
      },
      {
        title: 'Histórico',
        key: 'history',
        render: () =&gt; (
          &lt;Button
            type=&quot;text&quot;
            icon={&lt;HistoryOutlined /&gt;}
            onClick={() =&gt; setIsModalVisible(true)}
          &gt;
            &lt;AccessHistoryModal isVisible={isModalVisible} setVisible={setIsModalVisible}/&gt;
          &lt;/Button&gt;
        )
      },
      {
        title: 'Ação',
        key: 'action',
        render: () =&gt; (
          &lt;Button
            type=&quot;text&quot;
            href=&quot;#&quot;
            icon={&lt;EditOutlined /&gt;}
          &gt;
          &lt;/Button&gt;
        )
      },
    ];
  
    return (
      &lt;Table 
        columns={columns} 
        dataSource={data} 
        pagination={{ defaultPageSize: 10, showSizeChanger: false }}
      /&gt;
    );
  };
  </code></pre>
  <p>I need to update the following child Modal Component upon click:</p>
  <pre><code>export default function AccessHistory(props: HistoryData) {
      const closePopup = useCallback(() =&gt; {
          props.setVisible(false);
        }, [props]);
  
      return (
          &lt;Modal 
              title=&quot;Histórico de acesso&quot;
              visible={props.isVisible}
              onCancel={closePopup}
              footer={null}
          &gt;
              &lt;div className=&quot;modal-subtitle&quot;&gt;
                  Últimas ações realizadas no sistema do tribunal
              &lt;/div&gt;
          &lt;/Modal&gt;
      );
  }
  </code></pre>
  <p>I can see that the callback function <code>closePopup</code> is called when the user clicks outside the mask, but the function <code>props.setVisible</code> is not able to change the state of the component.</p>
  <p>What do I need to change to have the modal closed when user clicks off the dialogue?</p>