React Material Overlapping Header and Body

I am trying to create a header that has a background image, but when a user scrolls, the header takes too long to change color and ends up overlapping with the body. Any tips on how i can prevent the header and body overlapping will be appreciated. My code and how the page looks on scroll is as below:


        rightLinks={<HeaderLinks />} 
          height: 200,
          color: "white"

    <Parallax small filter image={require("assets/img/profile-bg.jpg")} style={{height: 250}}/>

      <div className={classes.container} style={{background:"#E5E5E5"}}>
      <BusinessesSection category={} />

      <Footer />

The current header on scroll looks like this :

This is what i want :