Получение данных с помощью реакции и сопоставления

Я пытаюсь получить данные из вызова API с помощью реакции и сопоставить их, чтобы я мог перебирать список элементов. Проблема в том, что при получении с помощью response ничего не возвращается в списке, хотя при вызове API есть данные, может ли проблема быть связана с сопоставлением или с состоянием? Я включил столько кода, чтобы вы могли видеть от уровня представления к репозиторию, включая примеры данных, которые возвращаются в API. Я новичок, чтобы отреагировать, спасибо

Реагировать на код

import * as React from 'react';
import './PracticeAreas.css';

import IReportGroup from 'src/model/IReportGroup';

interface IOwnProps {
    callAction: any
}

interface IOwnState {
    groups: IReportGroup[]
}

class PracticeAreas extends React.Component<IOwnProps, IOwnState> {

    constructor(props: IOwnProps) {
        super(props);
        this.state = {
          groups: []
        }
      }

    public render() {

        return (
        <div className = "col-md-12 practiceAreas">
            <h1>Practice Areas</h1>
            <div className = "item-container plain-bg selection-refinement">
                <div className = "refinement-search">
                    <input type = "text" value = "" placeholder = "What are you looking for?" />
                </div>
            </div>

            <ul className = "list-inline groupedTags">
                {this.state.groups}
            </ul>
        </div>
        );
    }

    public groups() {
        fetch(`https://localhost:44301/api/v2/navigator/reports/groups`)
            .then((res) => res.json()
            .then((data) => { 
                const groups = data.results.map((group: IReportGroup) => {
                    return( <li key = {group.id}>{group.name}</li>
                )
        })
        this.setState({groups: groups});
        }))
    }
};

export default PracticeAreas

Вызов API

[Route("groups")]
[HttpGet]
public IList<NavigatorReportSelectionGroup> GetGroups()
{
    var groups = navigatorReportSelectionService.GetGroups();
    return groups.ToList();
}

Сервисный звонок

public IList<NavigatorReportSelectionGroup> GetGroups()
{
    var allTopicGroups = navigatorService.GetTopicGroups();

    return
        allTopicGroups.Select(x => new NavigatorReportSelectionGroup
        {
            Id = x.GroupId,
            Name = x.Name
        }).ToList();
}

Репо

public IEnumerable<NavigatorTopicGroup> GetTopicGroups()
{
    return navigatorTopicGroupRepository.GetAll();
}

Модель

public class NavigatorTopicGroup
{
    public Guid GroupId { get; set; }
    public string Name { get; set; }
}

Пример данных API

<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>a184e2c5-af49-413e-9747-06741e97a512</Id>
    <Name>Insurance & Reinsurance group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>
<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>955e3e12-6e02-4e77-bcec-08b2fcb6f3e8</Id>
    <Name>Patents group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>
<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>d21384b5-27be-4bfc-963d-0d2ad40dbbfb</Id>
    <Name>Employment: Canada group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>

IReportGroup:

export default interface IReportGroup {
    id: string,
    type: ReportOptionType,
    name: string,
    order: number,
    focused: boolean
}