setState не обновляет состояние

Вот два компонента, при нажатии на MainWord появляется MainWordStand - окошко. Но при нажатии на крестик на этом окошке для его закрытия, не происходит ничего. Я вызываю метод closeStand компонента MainWord, через props, но setState не обновляет состояния. Пробовал напрямую через this.state.showStand, state также не меняется, вызов render напрямую, с передачей ему аргументов, тоже не получается. Но дело ещё и в том, что document.querySlector(.foreground).style.display = 'none' также не работает. Но если пишу какой-нибудь alert, он срабатывает. Даже если вызываю setState, которые меняет другую часть состояния, это срабатывает, но showStand менять не хочет. Как уже написал display не меняется, за то меняется visibility, если я пишу это)

class MainWordStand extends React.Component {
    constructor(props) {
        super(props)
        this.closeStand = this.closeStand.bind(this);
    }
    closeStand() {        
        this.props.closeStand();
    }
    render() {
        return ReactDOM.createPortal(
            <div className="word-stand">
                <span
                    className="fas fa-times close-window-button"
                    onClick={this.closeStand}
                />
                <h1>post</h1>   
                <p>noun:</p>
                <ul>
                    <li>Почта</li>
                    <li>Столб</li>
                    <li>Мачта</li>
                </ul>
                <p>verb:</p>
                <ul>
                    <li>Размещать</li>
                    <li>Расклеивать</li>
                </ul>
            </div>,
            document.querySelector('.foreground')
        )
    }
}
class MainWord extends React.Component {
    constructor(props) {
        super(props);
        this.contextMenuHandler = this.contextMenuHandler.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
        this.deleteSelf = this.deleteSelf.bind(this);
        this.showStand = this.showStand.bind(this);
        this.closeStand = this.closeStand.bind(this);
        this.state = {
            showSelf: true,
            showMenu: false,
            showStand: false,
            x: 0,
            y: 0
        }
    }
    showStand() {
        this.setState({
            showStand: true
        });
        document.querySelector('.foreground').style.display = '';
    }
    closeStand() {
        this.setState({
            showStand: false
        });
        document.querySelector('.foreground').style.display = 'none';
    }
    contextMenuHandler(event) {
        event.preventDefault();
        this.setState({
            showMenu: true,
            x: event.pageX,
            y: event.pageY
        });
    }
    closeMenu() {
        this.setState({
            showMenu: false,
        })
    }
    deleteSelf() {
        this.setState({
            showSelf: false
        })
    }
    render() {
        console.log(this.state.showStand);
        if (this.state.showSelf)
            return (
                <div
                    className="main-word"
                    onContextMenu={this.contextMenuHandler}
                    onClick={this.showStand}
                >
                    <span>{this.props.value}</span>
                    {this.state.showMenu ?
                        <MainWordMenu
                            x={this.state.x}
                            y={this.state.y}
                            closeMenu={this.closeMenu}
                            id={this.props.id}
                            deleteCallback={this.deleteSelf}
                            showEditWord={this.props.showEditWord}
                        /> :
                        null}
                    {this.state.showStand ?
                        <MainWordStand
                            closeStand={this.closeStand}
                        /> :
                        null}
                </div>
            )
        else 
            return null;
    }
}