Error when opening a modal with react-bootstrap

Question

I'm using reactJS 17.0.1 with react-bootstrap 1.5.1 and bootstrap 4.6.0

I have a modal that I want to open with the openModal function that sets the state to showModal true, but when I open the modal I get this error in the console:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at div
    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:69820:30)
    at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:27003:24)
    at BackdropTransition
    at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:65869:24)
    at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:28429:23)
    at div
    at UserPage (http://localhost:3000/static/js/main.chunk.js:6005:5)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:68877:29)
    at div
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:26367:23)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:68512:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:68132:35)
    at App (http://localhost:3000/static/js/main.chunk.js:78:1)

Searching on the net I found out that many had this error, but no one did get this error neither while building a modal nor using react-bootstrap. here's the code I wrote for the modal

                 <Modal
                    onHide={this.closeModal}
                    backdrop="static"
                    keyboard={false}
                    show={this.state.show}>
                    <Modal.Header closeButton>
                        <Modal.Title>Delete account</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Are you sure you want to delete this account?</p>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={(e) => this.closeModal(e)} variant="secondary">Close</Button>
                        <Button onClick={(e) => this.onDeleteHandler(e)} variant="primary">Yes</Button>
                    </Modal.Footer>
                </Modal>

The function (e) => this.onDeleteHandler(e) it's not related to the modal and just deletes the account and redirects to the home page. The other two functions to open and close the modal are preventing the refresh and set the state to false and true.

Edit: I changed up the style of the body, I updated the modal code too

Answer 1

I found out after 5 days. If you are using create-react-app you will have an index.js in the root folder of your project, here you will see something like this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

You need to delete the <React.StrictMode> opening and closing tag and put a div like this:

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root')
);

That's my fix, if someone has another way please comment on this answer!