Background won't cover iPhone notch in ReactJS and CSS

I have a custom gradient background like so

.gradient-background {
    background: linear-gradient(245deg,#F029C4,#FF0265);
    background-size: 180% 180%;
    animation: gradient-animation 3s ease infinite;
    height: 100vh;
    width: 100%;
    margin: 0px;
    padding: 0px;
 
  }

I've read that you need to add this meta tag so that the notice on the iPhone is covered so I did it like so

class App extends React.Component{


    render(){

      return(

        
        <div className="app" class="gradient-background" >
       
       
        <meta name='viewport' content='initial-scale=1, viewport-fit=cover'/>
       
           <InitialPage  />
         
        </div>
      );
    }
  }
  

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);

The issue is that the background just ends at the navigation bar on the screen, it doesn't fully cover the notch. How can I make it fully cover the notch and ignore the safe area? I'm building a web app.