При открытии боковой панели предыдущая не закрывается React JS

В проекте на экран выводятся таблицы, на каждой таблице есть кнопка, открывающая боковую панель с инфо о таблице и разным функционалом. Если я кликаю на все таблицы, то эти боковые панели открываются каждая новая поверх предыдущей. Необходимо сделать так, чтобы при открытии новой панели старая автоматически закрывалась.

Не могу понять, в каком компоненте даже прописать функцию, чтобы открытие одной панели закрывало другую...

Компонент таблицы с кнопкой открытия:

export const Table = ({
    table: table
}) => {
const [isOpenSideBar, setIsOpenSideBar] = useState(false);

function openSideBarNavigation() {
        updateXarrow();
        setIsOpenSideBar(true);
        updateXarrow();
    }

    function closeSideBarNavigation() {
        setIsOpenSideBar(false);
    }

    return (
        <>
{isOpenSideBar && (
                <>
                    <SideBarNavigation
                        table={table}
                        onClose={closeSideBarNavigation}
                        onTableCopyHandler={onCopyTable}
                        onTableDeleteHandler={onDeleteTable}
                        onChangeColumnVisibilityHandler={
                            onChangeColumnVisibilityHandler
                        }
                    />
                </>
            )}
<div
                    className={styles.MainContainer}
                    id={table.name}
                    style={{
                        position: "absolute",
                        border: "2px solid",
                        borderRadius: "3px",
                        margin: "10px",
                        backgroundColor: color
                    }}
                >
                    <div id="sideBar" className={styles.SideBar}></div>
                    <div className={styles.TableHead}>
                        <div
                            className={styles.HeaderContainer}
                        >
                        <button type="button" 
                        style={{ backgroundColor: color, border: "none", color: "aliceblue", cursor: "pointer" }}
                        onDoubleClick={openSideBarNavigation}
                        disabled={false}
                        >
                            {table.name}
                        </button>
                        </div>

                        <div
                            className={styles.InfoButton}
                            onClick={openModalWithTableInfo}
                        >
                            <InfoIcon />
                        </div>
                    </div>
                    <div style={{ borderBottom: "solid 1px" }}>
                        {table.columns
                            ?.filter((el) => el.isVisible)
                            .map((column) => {
                                let components = [];
                                components.push(
                                    <Column column={column} key={column.name} />
                                );
                                return components;
                            })}
                    </div>
                </div>
</>
    );
};

И компонент боковой панели:

export const SideBarNavigation = ({
    onClose: onClose,
    table: selectedTable
}) => {
function getTableColumns() {
        let components = [];
        selectedTable.columns?.map((column, index) => {
            components.push(
                <div className={styles.NameContainer}>
                    <Column column={column} key={column.name} />
                    <input
                        type="checkbox"
                        name={column.name}
                        checked={column.isVisible}
                        key={"column" + column.name}
                        onClick={() => handleChangeColumnVisible(index)}
                    />
                </div>
            );
        });
        return components;
    }
return createPortal(
        <>
            <div className={styles.SidePanel}>
                <label
                    className={styles.CloseButton}
                    htmlFor="side-checkbox"
                    onClick={onClose}
                >
                    +
                </label>
                <div className={styles.HeaderContainer}>
                    Действия с таблицей: {selectedTable.name}
                </div>
<div className={styles.ColumnContainer}>
                    <div className={styles.FieldsHeaderContainer}>
                        <label htmlFor="side-checkbox">Поля таблицы:</label>
                    </div>
                    <div className={styles.FieldsContainer}>
                        {getTableColumns()}
                    </div>
</div>
            </div>
        </>,
        document.getElementById("react-modals")
    );
};