Reactjs modal bug – doesn’t close on 2nd open

reactjs bug — I have a node api and react shell and I am running into some bugs I am having difficulty in figuring out how to fix.

Its likely the way I am managing the props/changes between parents/child and other components is playing havoc

+user editing on admin page – there is a bug here (props changing issue)
^ so its again maybe a props/prev – child/parent issue — where I want the modal to close – it seemed to jam up – as if it was unsure if it was open or closed..

so I first click on edit user – their details come up, I make a change – submit, saves and closes the modal fine, but if I do it again – submit, saves the changes but does not close the modal – it remains open..

So here is the modal box part on the admin page — there is one for adding a new user and editing an existing user. The modal breaks when trying to close it after its been opened –

  getEditUser(item){
    //console.log("EDIT", item);
    let that = this;

    return (
      <ModalBox 
        open={that.state.openEdit}
        handleOpen={function(data){
          //console.log("that.state.openEdit", that.state.openEdit)
          //console.log("OPEN EDIT PANEL");
          that.setState({ 
            openEdit: true, 
          });
        }}
        handleClose={function(data){
          //console.log("that.state.openEdit", that.state.openEdit)
          //console.log("CLOSE EDIT PANEL");
          that.setState({ 
            openEdit: false, 
          });
        }}
        button={{"label": "Edit", "color":"primary", "variant":"contained"}}
        modalContents={
          <div className="standard-padding edit-user">
            <h5>Edit User {item.id}</h5>
      
            <GeneralFormik 
              schema={this.getSchema(item)} 
              submitHandler={this.editUserHandler}
              returnAsFormData={true}
            />
                    
          </div>
        }
      />
    )

  }

when the edit has been submitted – want to close the modal automatically

  editUserHandler(data){
    let that = this;

    const formObject = Object.fromEntries(data.entries())
    
    //console.log("CLOSE EDIT PANEL");
    that.setState({ 
      openEdit: false, 
    });

    this.props.editUser(formObject.id, data, getToken(), function(resp) {
      if(resp){
        //console.log("resp-readUsers", resp.data);
        //console.log("resp-user", resp.data.data.person);
        console.log("RESP--------", resp)
        that.fetchUsers();
      }
    });
  }

here is the modal box code

import React, { Component } from 'react';

import Modal from '@mui/material/Modal';
import Backdrop from '@mui/material/Backdrop';
import Fade from '@mui/material/Fade';
import Button from '@mui/material/Button';

import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

import './ModalBox.scss';

class ModalBox extends Component {
    constructor(props, context) {
      super(props, context);
      this.state = { open: false };
    }

    componentDidUpdate(prevProps) {
      //Typical usage to compare props     
      if(this.props.open !== prevProps.open) {
        if(this.props.open){
          this.handleOpen();
        } else{
          this.handleClose();
        }
      }
    }

    handleOpen = () => {
      this.setState({open: true});

      //if there is a handle open callback - invoke it
      if(this.props.handleOpen) {
        this.props.handleOpen();
      }
    };

    handleClose = () => {
      this.setState({open: false});

      //if there is a handle close callback - invoke it
      if(this.props.handleClose) {
        this.props.handleClose();
      }
    };

    bodyClick = (el) => {
      if(el.target.dataset){
        let dismiss = el.target.dataset.dismiss;

        if(dismiss === "modal"){
          this.handleClose();
        }
      }
    }

    render() {
      return (
        <>
          {this.props.button &&
            (
              <Button 
                variant={this.props.button.variant}
                color={this.props.button.color} 
                onClick={this.handleOpen}
              >
                {this.props.button.label}
              </Button>
            )
          }
          <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            className={'modalbox'}
            open={this.state.open}
            onClose={this.handleClose}
            closeAfterTransition
            BackdropComponent={Backdrop}
            BackdropProps={{
              timeout: 500,
            }}
          >
            <Fade in={this.state.open}>
              <div className={'App modalboxform wide-modal'} onClick={this.bodyClick}>
                <IconButton className="close-button" onClick={this.handleClose}>
                  <CloseIcon/>
                </IconButton>

                <div className="modalboxwrap">
                  {this.props.modalContents}
                </div>
              </div>
            </Fade>
          </Modal>
        </>
      );
    }
}

export default ModalBox;