Как заставить содержимое ящика React Material-UI работать независимо от того, открыт ящик или закрыт?

Question

Я создаю приложение React с функцией чата. Функция чата находится в Material-UI Drawer , который переключается, открывается или закрывается при нажатии на значок чата.

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

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

Вот код.

import React from 'react';
import './Chat.css';
import Drawer from '@material-ui/core/Drawer';
import ChatIcon from '@material-ui/icons/Chat';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import Tooltip from '@material-ui/core/Tooltip';
import App from './App/App';
import Cookies from 'universal-cookie';

type Anchor = 'right';

// SegmentIO tracking
declare global {
    interface Window { analytics: any; }
}

export default function Chat() {
    const [state, setState] = React.useState({
        right: false,
    });

    const toggleDrawer = (anchor: Anchor, open: boolean) => (
        event: React.KeyboardEvent | React.MouseEvent,
    ) => {
        if (
            event.type === 'keydown' &&
            ((event as React.KeyboardEvent).key === 'Tab' ||
                (event as React.KeyboardEvent).key === 'Shift')
        ) {
            return;
        }

        //SegmentIO Tracking
        const cookieMgr = new Cookies();
        var identity = cookieMgr.get('identity');
        var room = cookieMgr.get('room');

        if (open) {
            window.analytics.page('Chat');
            window.analytics.track('User opened Chat', {
                identity: identity,
                name: room
            });
        } else {
            window.analytics.track('User closed Chat', {
                identity: identity,
                name: room
            });
        }

        setState({ ...state, [anchor]: open });
    };


    return (
        <div>
            {(['right'] as Anchor[]).map(anchor => (
                <React.Fragment key={anchor}>
                    <Tooltip title="Chat">
                        <ChatIcon onClick={toggleDrawer(anchor, true)} className="ChatIcon" />
                    </Tooltip>
                    <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
                        <Card className="rootChat">
                            <CardContent>
                                <Typography className="titleChat" gutterBottom>
                                    <div className="titleContainerChat"><ChatIcon fontSize="large" className="titleIconChat" /> Chat</div>
                                    <div className="buttonContainerChat" >
                                        <Tooltip title="Close"><ChevronRightIcon fontSize="large" className="iconCancelChat" onClick={toggleDrawer(anchor, false)} /></Tooltip>
                                    </div>
                                </Typography>
                                <App />
                            </CardContent>
                        </Card>
                    </Drawer>
                </React.Fragment>
            ))}
        </div>
    );
}

Вот скриншот того, что происходит каждый раз, когда вы нажимаете на значок чата и открываете ящик: