I am looking for some guidance in this react code I have a ActionsDropDownWidget with a bunch of dropdown items being passed as children to it.

<DropdownMenu
                testId="actions-menu"
                trigger={({ triggerRef, ...props }) => (
                    <Button
                        appearance="subtle"
                        {...props}
                        iconBefore={<VerticalOverflowIcon label="more" />}
                        ref={triggerRef}
                    />
                )}
            >
                {children}
            </DropdownMenu>

Here is how I pass the children to ActionsDropDownWidget

<ActionsDropDownWidget attachment={attachment} onDeleteAttachment={onDeleteAttachment}>
                <CustomerDropdownActions
                    attachment={attachment}
                    onAttachmentDownload={onAttachmentDownload}
                    onCopyAttachmentName={onCopyAttachmentName}
                    onDeleteAttachment={onDeleteAttachment}
                />
            
        </ActionsDropDownWidget>

Here what is being rendered from CustomerDropdownActions

<DropdownItemGroup hasSeparator testId="negative-actions">
                <DropdownItem
                    onClick={(_) => setOpenDialog(true)}
                    elemBefore={
                        <TrashIcon label={t("confirmation_modal.negative_action.text")} testId={"trash-button"} />
                    }
                    description={t("action_dropdown.delete_attachment.description")}
                >
                    {t("action_dropdown.delete_attachment.text")}
                </DropdownItem>
            </DropdownItemGroup>
            {showConfirmationModal}

Now when the dropdown is rendered and so are the children in it.

When I click on the child above, its onClick tries to update the state. However, that state isn’t reflected and so the Dialog does not open.

Where am I going wrong in this?