title: How to render multiple notifications with help of notistack in react?
body: <p>I'm trying to use React's 'notistack' module to display several notifications as a stack. However, it appears that I am making a mistake, as Whenever I receive a warning:</p>
  <p><code>react_devtools_backend.js:3973 Warning: Cannot update during an existing state transition (such as within render)</code></p>
  <p>I'm using the state here to set the Response messages(they are coming from api), which are an array of notifications. Once the alerts have been rendered, I should also make the state of the Response messages an empty array.</p>
  <p>renderPage.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useContext } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  import Button from &quot;@mui/material/Button&quot;;
  import Typography from &quot;@mui/material/Typography&quot;;
  
  import { SnackbarProvider } from &quot;notistack&quot;;
  
  import Zoom from &quot;@material-ui/core/Slide&quot;;
  
  import Notification from &quot;../../components/Notification&quot;;
  import { handleResponse } from &quot;../../services/responseHandler&quot;;
  import { SelectedRunnerContext } from &quot;./RunnersPage&quot;;
  
  export function RunnersForm() {
      const { selected } = useContext(SelectedRunnerContext);
      const [responseMessages, setResponseMessages] = useState([]);
      const notistackRef = React.createRef();
      const onClickDismiss = (key) =&gt; () =&gt; {
          notistackRef.current.closeSnackbar(key);
      };
  
      const MakePostRequest = (event) =&gt; {
          event.preventDefault();
          setResponseMessages([]);
          const data = {
              selected_runners: selected,
          };
  
          const requestOptions = {
              method: &quot;POST&quot;,
              headers: {
                  Accept: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
              },
              body: data,
          };
          axios
              .post(&quot;/messages&quot;, requestOptions)
              .then((response) =&gt; {
                  const result = handleResponse(response.data);
                  setResponseMessages(result);
              })
              .catch((error) =&gt; {
                  console.log(error);
              });
      };
  
      return (
          &lt;&gt;
              &lt;Button onClick={MakePostRequest}&gt;Post&lt;/Button&gt;
              {!!responseMessages.length &amp;&amp; (
                  &lt;SnackbarProvider
                      maxSnack={4}
                      ref={notistackRef}
                      dense
                      preventDuplicate
                      anchorOrigin={{
                          vertical: &quot;bottom&quot;,
                          horizontal: &quot;right&quot;,
                      }}
                      TransitionComponent={Zoom}
                      sx={{
                          width: 700,
                      }}
                      style={{
                          fontSize: 15,
                          fontWeight: 700,
                      }}
                      action={(key) =&gt; (
                          &lt;Button onClick={onClickDismiss(key)}&gt;
                              &lt;Typography
                                  variant=&quot;subtitle2&quot;
                                  style={{
                                      fontWeight: 600,
                                      fontSize: 16,
                                      color: &quot;#00579b&quot;,
                                  }}
                              &gt;
                                  Dismiss
                              &lt;/Typography&gt;
                          &lt;/Button&gt;
                      )}
                  &gt;
                      &lt;Notification messages={responseMessages} /&gt;
                  &lt;/SnackbarProvider&gt;
              )}
          &lt;/&gt;
      );
  }
  
  </code></pre>
  <p>Notification.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Fragment } from &quot;react&quot;;
  import { useSnackbar } from &quot;notistack&quot;;
  
  export default function Notification(props) {
      const { enqueueSnackbar } = useSnackbar();
      const { messages } = props;
      const options = {
          variant: &quot;success&quot;,
          autoHideDuration: 6000,
          transitionDuration: { enter: 400, exit: 400 },
      };
  
      messages.forEach((msg) =&gt; {
          enqueueSnackbar(msg, options);
      });
      return &lt;&gt;&lt;/&gt;;
  }
  
  </code></pre>