Flying bug (handleShow of null)

Alert.tsx

import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import IconButton from "@material-ui/core/IconButton/IconButton";
import Button from "../Button/Button";
import * as React from "react";
import { ReactNode } from "react";
import CloseIcon from "../icons/CloseIcon";
import ErrorIcon from "../icons/ErrorIcon";
import "./alert.style.scss";

interface IStateAlert {
    message: string | ReactNode;
    title: string | ReactNode;
    lock: boolean;
    isShow: boolean;
    classNames: {
        paper: string,
        title: string,
        content: string
    };
}

const DialogTitle = props => {
    const { children, onClose, className } = props;

    return (
        <MuiDialogTitle
            disableTypography
            classes={{ root: className }}
            style={{ borderBottom: "none" }}
        >
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    flexFlow: "row nowrap",
                    justifyContent: "center",
                    width: "100%",
                }}
            >
                <div style={{ width: "28px", height: "28px" }}>
                    <ErrorIcon />
                </div>
                <div
                    style={{
                        fontSize: "22px",
                        lineHeight: "28px",
                        color: "#2F3441",
                        fontFamily: "'VTBGroup-Book', 'Arial', sans-serif",
                        marginLeft: "11px",
                    }}
                >
                    {children}
                </div>
            </div>
            {onClose ? (
                <IconButton onClick={onClose} className={"dialog-title-button-close"} autoFocus={true}>
                    <CloseIcon />
                </IconButton>
            ) : null}
        </MuiDialogTitle>
    );
};

export default class Alert extends React.PureComponent<{}, IStateAlert> {
    constructor(props) {
        super(props);

        this.state = {
            lock: false,
            message: "",
            title: "",
            isShow: false,
            classNames: {
                paper: "",
                title: "",
                content: "",
            },
        };
    }

    public static self;

    componentDidMount() {
        Alert.self = {
            handleClose: this.handleClose,
            handleShow: this.handleShow,
        };
    }

    componentWillUnmount() {
        Alert.self = null;
    }

    handleClose = () => {
        this.setState({
            isShow: false, message: "", title: "", classNames: {
                paper: "",
                title: "",
                content: "",
            },
        });
    };

    handleShow = (
        title: string | ReactNode,
        message: string | ReactNode,
        lock: boolean = false,
        classNames: {
            paper: string,
            title: string,
            content: string,
        }) => {
        const state: IStateAlert = {
            isShow: true, message, title, lock, classNames: {
                paper: "",
                title: "",
                content: ""
            }
        };
        if (classNames) {
            state.classNames = classNames;
        }
        this.setState(state);
    };

    render() {
        const {
            state: { isShow, message = "", title = "", lock, classNames },
        } = this;

        const handleClose = lock ? undefined : this.handleClose;
        const stylePaper = classNames.paper !== "" ? classNames.paper : "paper-style";
        const styleContent = classNames.content !== "" ? classNames.content : "dialog-content";
        const styleTitle = classNames.title !== "" ? classNames.title : "dialog-title";

        return (
            <Dialog
                open={isShow}
                onClose={handleClose}
                classes={{
                    paper: stylePaper,
                }}
            >
                <DialogTitle onClose={handleClose} className={styleTitle}>{title}</DialogTitle>
                <DialogContent className={styleContent} style={{ paddingTop: "0px !important" }}>
                    {message}
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "center",
                            marginTop: "24px",
                        }}
                    >
                        <div
                            style={{
                                width: "238px"
                            }}
                        >
                            <Button
                                onClick={handleClose}
                                color={"white"}
                                block={true}
                            >
                                Закрыть
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        );
    }
}