I want to create a custom Gutenberg block(react js) and I want to list the latest 5 posts from each author as a list item. Can anyone share an example, please?

Below is Gutenberg code to list the latest posts from a CPT.

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText, InspectorControls } = wp.editor;
const { SelectControl, TextControl, TabPanel, Panel, PanelBody, PanelRow } =
wp.components;

import { useSelect } from "wordpress user/data";
import { useBlockProps } from "wordpress user/block-editor";

registerBlockType("duib/block", {
title: __("listing block"),
icon: "groups",
category: "listing",
keywords: [__("listing "), __("lead bootstrap"), __("")],
attributes: {},

edit: (props) => {
    function onChangeCustomClass(newValue) {
        props.setAttributes({ customClass: newValue });
    }

    const blockProps = useBlockProps();
    const posts = useSelect((select) => {
        return select("core").getEntityRecords("postType", "author_posts");
    }, []);

    return [
        <div>
            {!posts && "Loading"}
            {posts && posts.length === 0 && "No Posts"}
            {posts && posts.length > 0 && (
                <div class="">
                    {posts.map((post) => {
                        return (
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="row mb-4 border rounded-3">
                                        <div class="col-lg-4 p-0" key={post.id}>
                                            Post ID:({post.id})<br />
                                            Post Title:{post.title.rendered}:<br />
                                            Post Author:{post.author}
                                            <br />
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>,
        <InspectorControls>
            <div style={{ padding: `20px` }}>
                <TextControl
                    label="Custom ID"
                    placeholder="Your custom ID goes here"
                    className="card-title"
                    value={props.attributes.customClass}
                    onChange={onChangeCustomClass}
                />
            </div>
        </InspectorControls>,
    ];
},

save: (props) => {
    return null;
},
});

The output I want is

Authorname John Doe
Post title 1
Post title 2
Post title 3

Authorname Jane Doe
Post title 1
Post title 2
Post title 3