Solution:

To solve this problem, if you are using and onlclick event for example, you will need to add an arrow function

For example, change FROM this:

<Button variant="secondary" onClick={showModal(false)}>

 

Add and arrow function: ()=> so Change to this:

<Button variant="secondary" onClick={()=>showModal(false)}>

 

This was my Console Output of the warning error:

Warning: Cannot update a component (`ContextProvider`) while rendering a different component (`MyModal`).
To locate the bad setState() call inside `MyModal`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render MyModal@https://127.0.0.1:5173/src/views/log/MyModal.jsx?t=1679696892425:31:7
div
div
QuizHome
RenderedRoute@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2572:7
Outlet@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2820:3
main
div
div
DefaultLayout@https://127.0.0.1:5173/src/components/
DefaultLayout.jsx:31:7
RenderedRoute@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2572:7
RenderErrorBoundary@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2534:5
Routes@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2882:7
Router@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2833:7
RouterProvider@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2725:7
ContextProvider@https://127.0.0.1:5173/src/context/
ContextProvider.jsx:32:32
react_devtools_backend.js:4012:25

 Video: S7FeAKnPRFg
 v