react классовый компонент + обновление classNames npm

Что-то у меня не получается с классовым компонентом всплывающего окна. Все просто окно открывается, когда isOpen === true При этом закрываться должно по клику на подложку. Использую для классов библиотеку classNames

import React, { useState } from "react";
import "./Popup.css"
const classNames = require('classnames');

class Popup extends React.Component {
    constructor(props) {
        super({props});
        this.handleClousePopup = props.handleClousePopup;
        this.children = props.children;
        this.isOpen = props.isOpen;
        this.state = {
            popupStyles: ''
        }
    }

    componentDidMount() {
        this.setState({ popupStyles: classNames('popup', {'popup_visible': this.isOpen}) });
    }
    
    render() {
        return (
                    <div className={this.state.popupStyles} onClick = {(e) => this.handleClousePopup(e)}>
                        <div className="popup__container">
                            {this.children}
                        </div>
                    </div>
                )
    }
}

export default Popup;

При этом окно открывается! Фнкция (e) => this.handleClousePopup(e) вызывается при клике и в родителе срабатывает console.log(e). НО закрыть не получается. Помогите, пожалуйста, понять, почему так происходит. Если можно именно с пояснением, т.к. я не шибко понимаю в классовых компонентах. И нужен именно классовый, т.к. в дальнейшем мне надо будет управлять размером всплывающего окна через useRef...

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

const handleClousePopup = (e) => {
    setIsOpenModal(false)
}

Соответственно я передаю isOpenModal в Popup в надежде, что там this.isOpen тоже будет false. Но опытном путем я вижу, что this.isOpen остается true

Ведь, как я понимаю, когда обовляется props, компонент так же должен обновиться, получив новое значение props...

Заранее спасибо!