Need help implementing Inertia V2's infinite scroll with React

So I was ecstatic when I heard about the new way to implement infinite scrolling with Inertia 2.0 and decided to give it a test, so I made a quick project following their docs and now I don't understand how to use The new <WhenVisible> component to load more "articles".

This is the controller, implementing basic pagination and the new merge functionality:

class ArticleController extends Controller
{
    public function index(Request $request)
    {
        $page = $request->input('page', 1);
        $perPage = $request->input('per_page', 15);

        $articles = Article::orderBy('created_at', 'desc')
            ->paginate($perPage, ['*'], 'page', $page);

        return Inertia::render('Articles', [
            'articles' => Inertia::merge(fn() => $articles),
        ]);
    }
}

import React, { useState } from "react";
import { WhenVisible } from "@inertiajs/react";

type Article = {
    id: number;
    title: string;
    teaser: string;
    created_at: string;
};

type ArticlesProps = {
    articles: {
        data: Article[];
        current_page: number;
        last_page: number;
    };
};

const Articles = ({ articles }: ArticlesProps) => {
    return (
        <div className="flex flex-col gap-y-2 m-1">
            {articles.data.map((article) => (
                <div
                    key={article.id}
                    className="flex flex-col border border-black p-2"
                >
                    <h1 className="text-2xl font-bold">
                        <span className="font-extrabold border rounded-full px-1 bg-blue-300">
                            {article.id}
                        </span>{" "}
                        {article.title}
                    </h1>
                    <p>{article.teaser}</p>
                    <p className="text-xs text-gray-600">
                        {article.created_at}
                    </p>
                </div>
            ))}

            {articles.current_page < articles.last_page && (
                <WhenVisible
                    data="articles"
                    fallback={
                        <p className="text-center text-gray-500">
                            Loading more...
                        </p>
                    }
                >
                    <p className="text-center text-gray-500">Loading more...</p>
                </WhenVisible>
            )}

            {articles.current_page >= articles.last_page && (
                <p className="text-center text-gray-500">
                    No more articles to load.
                </p>
            )}
        </div>
    );
};

export default Articles;

And this is the react component, in short I have no idea how to use the WhenVisible component to keep rendering, as you can see now I have a <p className="text-center text-gray-500">Loading more...</p> inside it which is clearly wrong, I tried having an empty div there, obviously doesn't work, I also tried wrapping the main div of the return statement in the WhenVisible component but that doesn't work because WhenVisible expects a string? inside it for some reason. I'm preplexed as to how do I use this new WhenVisible component, and the few tutorials I found were with VUE, anyone care to explain?