After closing Materialize CSS Modal the "modal-overlay" remains - How can we close it without touching the overlay?

I have a PLUS button that open a Materialize CSS Modal in React :

Plus button

import React from "react";

const AddBtn = ({ tooltipMessage, hrefDescription }) => {
  const hrefAddBtn = "#" + hrefDescription;
  return (
    <div className="fixed-action-btn">
      <a
        href={hrefAddBtn}
        data-position="left"
        data-tooltip={tooltipMessage}
        className="btn-floating btn-large blue darken-2 modal-trigger tooltipped">
        <i className="large material-icons">add</i>
      </a>
    </div>
  );
};

export default AddBtn;

And the Modal :

const CreditModal = ({ closeModal }) => {


  return (
    <Fragment>
      <div id="add-balance" className="modal" style={modalStyle}>

                ..... A lot of code goes here 
      <div>


    </Fragment>
);
}

Both of them inside a component :

const AddCredit = ({........}) => {

 return (

   <div className="container">
        {someBoolean ===  true? (
          <Fragment>
            <AddBtn tooltipMessage="Add Credit" hrefDescription="add-balance" />
            <CreditModal closeModal={closeModalAndOpenIFrame} />
          </Fragment>
        ) : (
          <Fragment>
            // Show some other Component
          </Fragment>
        )}
   </div>

 )


}

When I close the frame using a button the modal closes but the overlay remains , it looks like this :

<div class="modal-overlay" style="z-index: 1002; display: block; opacity: 0.5;"></div>

It's not my doing , probably it comes from the modal and remains , and the only way to get rid of this is clicking on the overlay , and I don't want that.

How can we remove this overlay programmatically ?