Iterate object as array not working for nested array into json in react typescript

I have the following issues. In this case, I am consuming a service with axios but when trying to render all this data through a map, i can`t return a specific property, as the name or description, however it only returns one data, here I will leave the captures with the code. I will highlight that the variable where I have the object must be converted to an array to use it in the map, try to print all the items showing only the name. This is the api I'm using: https://demo-api-work-test.herokuapp.com/group/ Thanks in advance to anyone who can suggest a solution screen consuming api with axios in chrome console

import { Card, CardContent, Typography } from '@mui/material'
import { Container } from '@mui/system'
import Group from '../../interfaces/Group.type';
import GroupDataService from '../../services/GroupDataService'

import React, { Component } from 'react'
type Props = {};


type T = keyof Group;
type State = {
    groups: Array<Group>
}

export default class List extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.listGroups = this.listGroups.bind(this);


    this.state = {
        groups: [],
    };
}

componentDidMount() {
    this.listGroups();
}

listGroups() {
    GroupDataService.getAll()
        .then((response: any) => {
            this.setState({
                groups: response.data
            });
            console.log(this.state.groups);
    })
    .catch((e: Error) => {
        console.log(e);
    });
}


render() {
    const { groups } = this.state;
    console.log(groups);
    return (
        <div>
            <Container>
                <div>
                {
                        [groups].map((object, index) => {
                          console.log(object[index]);
                        }),
                }
                </div>
                    
                {/* <CardActions>
                    <Button size="small">Learn More</Button>
                </CardActions> */}
                
            </Container>
        </div>
    )
  }
}