ErrorBoundary replaces current content with fallbackRender instead of adding it on top

I'm trying to display a banner with an error message on top of the page/component that's throwing the error. The error is triggered by an API call, so I'm using both the hook and the component from react-error-boundary.

I can catch the error and display the banner, but I can't figure out how to display it on top of the page instead of replacing the whole thing. I thought that's what fallbackRender is supposed to do but it still shows the banner and nothing else.

This is a simplified version of my current setup:

AlertBanner.js

    const AlertBanner = ({ error }) => {
      return <Container >{error}</Container>;
    };

App.js

  import { ErrorBoundary } from "react-error-boundary";
    const App = () => {
      return (
       <ErrorBoundary fallbackRender={AlertBanner}>
         <Login />
       </ErrorBoundary>
      )
    }

Login.js

 const Login = () => {
 const handleError = useErrorHandler();
 const login = () => {
loginService.login(credentials).then(setUser, handleError);
                  };
 return (
    <div className={classes.container}>
      <FullScreenImage />
      <form className={classes.login} onSubmit={handleSubmit}>
      // [...]
      </form>
    </div>
  );