The 'popupVisible' not work

I use 'popupVisible' and 'onPopupVisibleChange' with React.useState，but popup won't close once opened

import React, { useState } from "react";
import "antd/dist/antd.css";

import Trigger from "rc-trigger";
import { List, Button } from "antd";

import "./index.css";

const App = () => {
  const [visible, setVisible] = useState(false)

  console.log(`visible`, visible)

  return (
    <div className="wrapper">
      <Trigger
        popupVisible={visible}
        action={["click"]}
        // destroyPopupOnHide={true}
        popup={<span>popup</span>}
        popupAlign={{
          points: ['tl', 'tr'],
          // offset: [0, 3]
        }}
        onPopupVisibleChange={(a) => {
          console.log('a', a)
          setVisible(a);
        }}
      >
        <Button block >+++</Button>
      </Trigger>
    </div>
  );
};

export default App;

Start with the linked CodeSandbox reproduction and trace the Trigger component's popupVisible and onPopupVisibleChange behavior when the button is clicked. Done means the popup opens and then closes while the controlled React state stays synchronized with the component.