createPortal react 18 not rendering the component

Question

I'm trying to use the createPortal method to render an API error message in my ErrorSnackbar component. However, when an error occurs, the component is not rendering as expected.

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response) {
      const errorRoot = document.getElementById('error-snackbar');
      createPortal(<ErrorSnackbar message={error.response.data.message} />, errorRoot);
    }
    return Promise.reject(error);
  }
);

For context, I have added two DOM nodes in my index.html file:

<div id="root"></div>

<div id="error-snackbar"></div>

To verify if the problem lies within the ErrorSnackbar component, I tried adding a simple HTML tag like <h1>But this is not also rendering</h1> directly to the error-snackbar div, but even that is not rendering when an error occurs.

I believe the issue might be related to the usage of createPortal in the axios interceptor. Could someone please help me identify why the ErrorSnackbar component is not rendering when an error happens? Any suggestions or insights on how to make this work would be greatly appreciated. Thank you!