React Media Query needs refresh to show image

I am using react-media (https://github.com/ReactTraining/react-media) to handle different screen sizes.

The aim of using react-media:
Just bigger screens should see the parallax image (using materializeCSS for parallax).

Problem:
If you resize the window, the image will disappear (how it should be) and when you go back to the bigger screen the place of the image is white. After refreshing the page the image is there again. I noticed it occurs every time when I use media and a javascript materializeCSS "package".

How can I fix that?

import React, { useLayoutEffect } from "react";
import picture from "../../image/Introduction.jpeg";
import Media from "react-media";

const Paralaxes = () => {
  useLayoutEffect(() => {
    const M = window.M;
    const elems = document.querySelectorAll(".parallax");
    M.Parallax.init(elems, {});
  });

  return (
    <Media query={{ minWidth: 768 }}>
      {matches =>
        matches ? (
          <div className="parallax-container">
            <div className="parallax">
              <img src={picture} className="responsive-img" alt="background" />
            </div>
          </div>
        ) : (
          <div className="container">
            <div className="divider black" />
          </div>
        )
      }
    </Media>
  );
};

export default Paralaxes;

Thanks a lot!