Why is this closeModal in React not working?

Question

Currently I have a component which render a modal component.

constructor(props) {
        super(props);
        this.state = {
            fieldId: "",
            rating: -1,
            description: "",
            showModal: false //This is what checks if the modal should or shouldnt be rendered
        };
        console.log(props) //week number, beginning with 0
        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

showModal() {
    console.log("showmodal state before any click")
    console.log(this.state.showModal) //false


    this.setState({
        showModal: true
    }, () => {
        console.log("clicked show modal")
        console.log(this.state.showModal) //true
    });



}

closeModal() {
    this.setState({
        showModal: false
    }, () => {
        console.log("clicked closeModal")
        console.log(this.state.showModal) //true <------ !WHY IS THIS TRUE??
    });
}


    render() {
        var weekId = this.props.weekId;

        //current week, round up
        //lived weeks, round down
        //total weeks, round up
        if (weekId < this.props.weeksToRegisterDate) {
            return <div id={weekId} className="cube-lived"></div>
        } else if (weekId == this.props.currentWeek) {
            return <div id={weekId} title={weekId} className="cube green" onClick={this.showModal}>
                <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
            </div>
        } else {
            return <div id={weekId} title={weekId} className="cube white" onClick={this.showModal}>
                <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
            </div>


        }


    }
}

Basically if I click the cube it will render a modal Component, which looks like this.

    import React from 'react'
import './CalendarFieldModal.css'
class CalendarFieldModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        };

    }


    render() {


        if (!this.props.show) {
            return null;
        }
        // return <div className="cube-to-spawn"></div>
        return <div id="open-modal" class="modal-window">
        <div>
          <a href="#" title="Close" class="modal-close" onClick={this.props.close}>Close</a> //this triggers the function and should close the modal
          <h1>Voilà!</h1>
          <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
          <div><small>Check out</small></div>
          </div>
      </div>



    }
}

export default CalendarFieldModal;

Now in the late component I have a close button, which If i click, i can see the closeModal() function triggering and logging the console.log , so I suppose that the state is changing to. But still it doesnt close the modal. So i dont understand the issue

EDIT: This is how it looks https://codesandbox.io/embed/quirky-ardinghelli-8fgtx?fontsize=14&hidenavigation=1&theme=dark you must open the preview in a new windows, or else the modal wont load

Answer 1

Refactor it a bit:

    if (weekId < this.props.weeksToRegisterDate) {
        return <div id={weekId} className="cube-lived"></div>
    } else {
        const currentStyle = (weekId == this.props.currentWeek) ? "green" : "white";
        return <div id={weekId} title={weekId} 
          className=`cube ${currentStyle}` 
          {...(!this.state.showModal && { onClick: this.showModal })}
        >
          <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
        </div>
    }

Explanation

Outer <div/> was not this.state.showModal changes aware - no props change, not rerendered - no matter inner object's props changed and should be rerendered.