事件句柄更新后的过时值-反应useState

Question

我有一个如下所示的全状态功能组件

const funComp = () => {
    const [Playlist, setPlaylist] = useState<string>();

    async function handleChange(value) {
       setPlaylist(value);
    }

    const submitTrack = (track, play) => {
      playlistService
        .submitTrack({ artist: accountService.userValue.profile, track, playlist: Playlist })
        .then(res => {
            console.log(res);
            return;
        })
    }

    function showPromiseConfirm(track: string) {
        confirm({
            title: 'Submit for...',
            icon: <SendOutlined />,
            content:
                <div className="col-12">
                    <div className="row">
                        <Select placeholder="Select Playlist to Submit" style={{ width: "100%" }} 
                            onChange={handleChange}>
                            <Select.OptGroup label="CompetitionS">
                                {
                                    Competitions && Competitions.map(x =>
                                        <Select.Option value={x.id}>{x.title}</Select.Option>
                                    )
                                }
                            </Select.OptGroup>                            
                        </Select>
                    </div>
                </div>,
            onOk() {
                return submitTrack(track, playlst);
            }
        });
    }

    return <Button onClick={() => showPromiseConfirm(x.id)} />
}

该组件将呈现一个按钮，单击该按钮将打开一个确认模式。该模式有一个好的选项，当单击该选项时，它将异步发送API请求并关闭表单。

但是，模式还包含一个select元素，当其值更改时，它会通过handleChange回调更新播放列表值来更新组件的状态。

我面临的问题是，在onOkay回调中发送的播放列表值总是过时的。仅在两次单击值后更新。有人可以帮忙吗？

使用的确认和选择元素是AntD组件。