CSS Infinite Vertical Scroll for Arrow Image Background Without Gaps

I’m trying to create an infinite vertical scrolling effect for an arrow image (1101px in height) that scrolls from top to bottom without any visible gaps. The image is intended to repeat seamlessly, creating the effect of a continuously scrolling arrow background.

the image i want to infinetly scroll

import { useEffect, useRef } from "react";
import Heading from "../Heading/Heading";
import BodyText from "../BodyText/BodyText";
import infinteArrows from "../../assets/icons/arrowinfinte.png";
import './index.css';

const BusinessSuccess = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const container = containerRef.current;
        const image = container.querySelector(".scrolling-image");

        // Clone the image and append it at the bottom for a seamless scroll effect
        const clone = image.cloneNode(true);
        container.appendChild(clone);

        // Reset the scroll position when the first image scrolls up fully
        const handleAnimationEnd = () => {
            container.scrollTop = 0;
        };
        container.addEventListener("animationiteration", handleAnimationEnd);

        return () => {
            container.removeEventListener("animationiteration", handleAnimationEnd);
        };
    }, []);

    return (
        <div className="grid md:grid-cols-12 h-screen px-20 gap-10 bg-grayBg">
            {/* Left Column - Spans 8 columns on medium and larger screens */}
            <div className="col-span-12 md:col-span-8 flex flex-col justify-center items-center">
                <Heading
                    text="Formula For Business Success"
                    color="text-neon"
                    font="font-monument"
                    size="text-50px"
                    centered={false}
                />
                <BodyText
                    text="Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem
                    Ipsum Has Been The Industry's"
                    centered={false}
                />
            </div>

            {/* Right Column - Scrolling Image Effect */}
            <div className="col-span-12 md:col-span-4 flex items-center justify-center overflow-hidden relative h-full">
                <div ref={containerRef} className="scrolling-image-container w-full h-full absolute">
                    <img src={infinteArrows} alt="Infinite Arrows" className="w-full object-contain scrolling-image" />
                </div>
            </div>
        </div>
    );
};

export default BusinessSuccess;

.scrolling-image-container {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scrolling-image {
    flex-shrink: 0;
    height: 130%; /* Adjust to ensure the image goes out of view */
    animation: scrollVertically 5s linear infinite;
}

@keyframes scrollVertically {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%); /* Move the image fully out of view */
    }
}

So right now there are gaps, also image should infintely sccroll fine irepsective of screen size