Unable to open up React JS Modal

I want to achieve a clickable div that opens up a Modal upon click.

The modal import statement is as follows :

import UpdateMaterialModal from '../components/Update_Material/Update_Material_Modal';

Following is a list of the component declarations that I am using in my code :

const MaterialUpdationContainer = styled.div`
  border-style: solid;
  border-width: 5px;
  color: black;
  position: relative;
  text-align: center;
  background: white;
  width: 49%;
  height: 190px;
  top: 15px;
  margin-bottom: 10%;
  left: 1%;
  float: left;
`;

const UpdateMaterialDiv = styled.div`
  height: 100%;
  width: 100%;
`;

const UpdateMaterialContainer = styled.div``;

I have a class definition for Update Material as follows :

class UpdateMaterial extends Component {
  updateMaterial = event => {
    event.preventDefault();
    this.props.id.openMaterialUpdationHandler();
  };

  render() {
    return (
      <UpdateMaterialDiv onClick={this.updateMaterial}>
        <h3>Update Material</h3>
      </UpdateMaterialDiv>
    );
  }
}

In the ProjectsView class which is the main file, I have the following code :

class ProjectsView extends Component {
  constructor(props) {
    super(props);

    this.state = {
      id: this.props.match.params.id,
      isShowingMaterialUpdationModal: false,
      columns: [],
      isLoading: false
    };
  }

  openMaterialUpdationHandler = () => {
    console.log("Inside openMaterialUpdationHandler"); // Executes to give 'true' upon clicking div
    this.setState({
      isShowingMaterialUpdationModal: true
    });
  };

  closeMaterialUpdationHandler = () => {
    this.setState({
      isShowingMaterialUpdationModal: false
    });
  };

  render() {
    const {
      projectId,
      projectName,
      location,
      startDate,
      budget,
      activeStatus,
      totalHours,
      labourCosts,
      materialCosts,
      totalCost,
      isLoading,
      project,
      isShowingMaterialUpdationModal
    } = this.state;

    console.log("3", isShowingMaterialUpdationModal); // Also gives 'true' upon clicking div

    return (
      ...
      <MaterialUpdationContainer>
        <UpdateMaterial id={this}>
          {this.state.isShowingMaterialUpdationModal ? (
            <div onClick={this.closeMaterialUpdationHandler}></div>
          ) : null}
          <UpdateMaterialModal>
            className="modal" show={this.state.isShowingMaterialUpdationModal}
            close={this.closeMaterialUpdationHandler}>
          </UpdateMaterialModal>
        </UpdateMaterial>
      </MaterialUpdationContainer>
      ...
    );
  }
}

The Update_Material_Modal is as follows :

import React, { Component } from "react";
import styled from "styled-components";
import api from "../../api";

const InputText = styled.input.attrs({
  className: "form-control"
})`
  margin: 0px;
  background-color: black;
`;

const FormContainer = styled.div.attrs({})`
  margin: 0px;
  display: inline-block;
  width: 100%;
  height: 100%;
`;

const InputClientNameContainer = styled.div.attrs({})`
  margin-left: 2%;
  width: 30%;
  float: left;
`;

const InputClientAddressContainer = styled.div.attrs({})`
  margin-left: 2%;
  width: 30%;
  float: left;
`;

const InputClientContactContainer = styled.div.attrs({})`
  margin-left: 2%;
  width: 30%;
  float: left;
`;

class Update_Material_Modal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: props.show,
      close: props.close,
      children: props.children
    };
    console.log("INside the constructor show => ", this.state.show);
  }

  prepareComponentState(props) {
    var usedProps = props || this.props;

    this.state = {
      show: usedProps.show,
      close: usedProps.close,
      children: usedProps.children
    };
  }

  componentWillReceiveProps = async nextProps => {
    this.prepareComponentState(nextProps);
  };

  componentWillMount = async props => {
    this.prepareComponentState();
  };

  handleIncludeMaterialUpdation = async () => {
    console.log("Inside handleIncludeMaterialUpdation ========> ");
  };

  render() {
    var { show, close, children } = this.state;
    console.log("Value inside render show => ", show);

    return (
      <div>
        <div
          className="modal-wrapper"
          style={{
            transform: show ? "translateY(0vh)" : "translateY(-100vh)",
            opacity: show ? "1" : "0"
          }}
        >
          <div className="modal-header">
            <h3>Update Material</h3>
            <span className="close-modal-btn" onClick={close}>
              ×</span>
          </div>

          <div className="modal-footer">
            <button className="btn-cancel" onClick={close}>
              CLOSE
            </button>
            <button
              className="btn-continue"
              onClick={this.handleIncludeMaterialUpdation}
            >
              UPDATE
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default Update_Material_Modal;

Here is a code sandbox link: https://codesandbox.io/s/restless-surf-p6l0q

I am able to click on the div and the value of isShowingMaterialUpdationModal comes to true which I am able to display in the render() function. However no modal shows up. What am I doing wrong? Any help would be greatly appreciated. Thank you!