Modal stops working after state update

Description

The Modal component stops working after a state update

Steps to Reproduce

I’ve made a small code snippet to reproduce the problem.

First my dependencies in package.json

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "materialize-css": "^1.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-materialize": "^3.8.3",
    "react-scripts": "3.4.1"
  }

Code:

import React, {useState} from 'react';
import './App.css';
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css'
import {Button, Modal} from 'react-materialize'

function App() {

  const [text, setText] = useState('INITIAL')

  function changeText(){
    setText('AFTER')
  }

  return (    
    <div className="App">
    <p>{text}</p>
    <Button onClick={changeText}>CLICK ME</Button>
     <Modal
      header='Modal Header'
      trigger={<Button>MODAL</Button>}>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </Modal>      
    </div>
  );
}
export default App;

Steps to Reproduce

1. Click on MODAL button, the modal content should be displayed;
2. Click on CLICK ME button, the text will be updated;
3. Click on MODAL button again, the modal will not be displayed.

Expected behavior: The modal should be displayed again

Actual behavior: Modal is not displayed

Versions

react-materialize: 3.8.3 materialize-css: 1.0.0 react: 16.13.1

[alextrastero]

Ok, gonna check it out, thx for the info!

[tslima]

Before a state update when I click on Modal button the Modal is displayed, then I close it, click again, open again, close again, everything is fine.

After a state update when I click on Modal button, the modal is not displayed.