I am developing a story viewing component using the Zuck.js library, which requires users to be able to navigate between stories forward and backward. However, the backward navigation functionality isn’t working as expected. Below are the relevant code sections and configurations.

Code Description:
My code uses the Zuck.js library to present stories to users. Inside useEffect, I process the stories and images and initiate the Zuck.js instance. I’m trying to manage backward navigation through the onView callback, but this function isn’t working as expected.

Issue:
When I attempt to navigate backward, it doesn’t correctly go from the last to the first story. What can I do to resolve this issue?

const StoryBoxed = ({ data }) => {
    const storiesEl = useRef(null);
    const [afterFade, setAfterFade] = useState(true);
    const [beforeFade, setBeforeFade] = useState(false);

    // Initializing the story component with Zuck.js library
    useEffect(() => {
        if (window?.Zuck && storiesEl?.current) {
            const stories = data?.map((storyItem) => {
                const childs = storyItem?.images?.data?.map((childItem) => ({
                    id: createSlug(childItem?.title),
                    length: childItem?.length,
                    src: childItem?.mediaLink,
                    preview: childItem?.mediaLink,
                    link: childItem?.link,
                    linkText: false,
                    time: "",
                }));

                return {
                    id: createSlug(storyItem?.title),
                    photo: storyItem?.mediaLink,
                    name: storyItem?.title,
                    items: childs || [],
                    time: "",
                };
            });

            // Initializing Zuck instance
            const zuckInstance = new Zuck(storiesEl.current, {
                backNative: true,
                previousTap: true,
                skin: "Snapgram",
                autoFullScreen: false,
                avatars: true,
                paginationArrows: true,
                list: false,
                cubeEffect: true,
                localStorage: false,
                stories,
                language: {
                    visitLink: "LOOK",
                },
                callbacks: {
                    onView(storyId) {
                        const storyData = zuckInstance.data.find((story) => story.id === storyId);
                        const items = storyData?.items;
                        zuckInstance.navigateItem("previous", items.length - 1);
                        const pointers = document.querySelectorAll(".slides-pointers .wrap span");
                        if (pointers) {
                            pointers.forEach((pointer) => {
                                pointer.classList.remove("seen");
                            });
                        }
                    },
                },
            });
        }
    }, []);

    useEffect(() => {
        const el = document.querySelector("#stories");

        el.addEventListener("scroll", () => {
            const { scrollLeft } = el;
            const { scrollWidth } = el;
            const { clientWidth } = el;
            const scrollPercentage = (scrollLeft / (scrollWidth - clientWidth)) * 100;

            if (scrollPercentage > 90) {
                setAfterFade(false);
            } else {
                setAfterFade(true);
            }

            if (scrollPercentage < 10) {
                setBeforeFade(false);
            } else {
                setBeforeFade(true);
            }
        });
    }, []);

    return (
        <Wrapper fade={afterFade} beforeFade={beforeFade}>
            <div className="storiesWrapper" id="stories" ref={storiesEl} />
        </Wrapper>
    );
};