This is my landing page and sometimes my logo renders like this. How to avoid this?

import logo from "@/public/logo.svg";

    <section
      ref={ref}
      id="home"
      className="w-full min-h-screen flex justify-center items-center bg-cover bg-center bg-fixed"
      style={{ backgroundImage: `url(${bgImage.src})` }}
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={isInView && { opacity: 1 }}
        transition={{ duration: 1 }}
        className="absolute"
      >
        <Image width={1200} height={1200} src={logo} alt="Logo" />
      </motion.div>
    </section>