我有一个弹出窗口，其中包含一个菜单选项的列表组。在单击列表组中的“编辑”时，我的代码将显示一个模态，其中包含一个表单。我已经解决了以前在模态中单击任何位置时模态关闭的问题，方法是添加

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

到我的Popover组件的onClick侦听器。但是，这个添加不允许我单击模态中的表单输入字段，特别是文件输入字段，点击选择文件没有任何作用。2我删除了preventdefault操作，它允许我选择文件，但在提交表单时刷新页面。如何从弹出窗口中执行操作后显示的模态中实现正确的表单提交？
完整的代码如下（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>