export default function List({ children }) {
    const handlerClick = useCallback((data) => {
        console.log("LIST ITEM DATA:");
        console.log(data);
    }, []);

    return (
        <ul>
            {
                React.Children.map(children, (child, index, id) => {
                    return React.cloneElement((child), {
                        index,
                        onClick: handlerClick
                    });
                })
            }
        </ul>
    );
}

function User({ id, login, onClick }) {
    const data = {
        id,
        login
    };

    const handlerClick = useCallback(() => {
        onClick(data);
    }, [onClick, data]);

    return (
        <li onClick={handlerClick}>{login}</li>
    );
}

<List>
    {
        users.map((user) => (
            <User key={user.id} { ...user } />
        ))
    }
</List>