如何在弹出菜单操作后面的模式中拥有一个表单 - ReactBootstrap？

Question

我有一个包含菜单选项列表组的弹出框。 从列表组中单击“编辑”后，我的代码会弹出一个带有表单的模式。 我通过添加解决了在模式内的任意位置单击时模式关闭的先前问题

   e.stopPropagation();
   e.preventDefault();
   e.nativeEvent.stopImmediatePropagation();

到我的 Popover 组件的 onClick 侦听器。 但是，此添加不允许我单击模式中的表单输入字段，特别是文件输入字段，单击 Select 文件什么也不做。 我删除了 preventDefault 操作，它允许我访问 select 文件，但在提交表单时刷新页面。 在 Popover 中执行操作后，如何从正在显示的模式中实现正确的表单提交？

完整代码如下（EditSong是我的Modal with Form）：

    const PopoverMenu = React.forwardRef((props, ref) => {
        return (
            <Popover id="popover-basic" {...props} ref={ref}>
                <Popover.Body className="pt-2 ps-2 pb-2 pe-2">
                    <ListGroup variant="flush">
                        <ListGroup.Item action>Delete</ListGroup.Item>
                        <ListGroup.Item
                            action
                            onClick={() => setShowEditModal(true)}
                        >
                            Edit
                        </ListGroup.Item>
                        <EditSong
                            show={showEditModal}
                            setShow={setShowEditModal}
                        />
                    </ListGroup>
                </Popover.Body>
            </Popover>
        );
    });


    <OverlayTrigger
        trigger="click"
        rootClose
        placement="bottom"
        overlay={
            <PopoverMenu/>
        }
    >
        <i
            className="fa-solid fa-ellipsis"
            style={{ fontSize: "1.5em", cursor: "pointer" }}
        >
        </i>
    </OverlayTrigger>