When using Antd popover, if you enter the setState function when opening, you must click twice for the component to appear

page component

function Page(){
const userList = ...;
const [data, setData] = useState();
return (<>
<UserList users={userList} setData={setData} />
<div>{data}</div>
</>)

user list component

function UserList({ users, setData }) {
return {
users.map((user) => <Item user={user} setData={setData} />
}

item compoent

function Item({ user, setData }) {
const handlePopover = useCallback((newOpen) => {
// I also tried adding something like if (open)
  setData(user);
setOpen(newOpen);
}, [setOpen, setData, user, open]);
return  <Popover
    open={open}
    setOpen={handleOpenChange}
    content={
      <div>{user}</div>
    }
    openButton={<div>click me!</div>}
  />

popover (antd)

import { Popover as AntdPopover, ConfigProvider } from 'antd';
function Popover({ open, setOpen, content, openButton, title = '' }) {
const handleOpenChange = (newOpen) => {
setOpen(newOpen);
};
return (
<ConfigProvider
  theme={{
    token: {
      sizePopupArrow: 0,
    },
  }}
>
  <AntdPopover
    content={content}
    title={title}
    trigger="click"
    open={open}
    onOpenChange={handleOpenChange}
    destroyTooltipOnHide
  >
    {openButton}
  </AntdPopover>
</ConfigProvider>
);
}

I wrote this code in react.js, and the intention was for the data to change when the popover is displayed, but when I setData in this way, I have to press the open button twice. Is there a good way to solve this?