How to properly implement the list component?

Question

I'm trying to write a simple react client that will send a message to the server and receive back a list of all items. I want to output a list of all the items, but something goes wrong

import React, {Component, ReactNode} from "react";
import "./CommentPage.scss"
import axios from 'axios';
import {Message} from "@material-ui/icons";
import {Box} from "@material-ui/core";


export class CommentPage extends Component<any, any> {

    public render(): ReactNode {
        return (
            <div>
                <Form/>
                <Mlist/>
            </div>
        )
    }
}

interface message {
    name: string,
    value: string
}
let data: message [] = [{name: "a", value: "b"}]

class Form extends Component<{}, { name: string, message: string }> {

    constructor(props: {}) {
        super(props);
        this.state = {name: '', message: ''};

        this.handleChangeName = this.handleChangeName.bind(this);
        this.handleChangeMess = this.handleChangeMess.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeName(event: React.ChangeEvent<HTMLInputElement>) {
        this.setState({name: event.target.value, message: this.state.message});
    }

    handleChangeMess(event: React.ChangeEvent<HTMLInputElement>) {
        this.setState({name: this.state.name, message: event.target.value});
    }

    handleSubmit(event: React.ChangeEvent<EventTarget>) {

        axios.post('http://localhost:8080/addComment', {
            author: this.state.name,
            comment: this.state.message
        }).then(r => {
            axios.get('http://localhost:8080/allComments').then(r => {
              r.request.items.map((item: message) =>(data.push(item)));
            })
        }).catch(err => {
            alert(err)
        })
        this.setState({name: this.state.name, message: ''});
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name
                    <input type="text" value={this.state.name} onChange={this.handleChangeName}/>
                    Message
                    <input type="text" value={this.state.message} onChange={this.handleChangeMess}/>
                </label>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

class Mlist extends Component<{}, {}> {
    render() {
        return (
                <p>{data.map((m) => (
                    <li>{m.name}</li>
                ))}</p>
        );
    }
}

Until I handled the incoming response explicitly, and before I implemented the Mlist everything worked, that is, the data was sent to the server and came what I expected.

I get it:

TypeScript error in /Users/user/IdeaProjects/namep/front/itmo-hw3/node_modules/@types/babel__traverse/index.d.ts(68,50):
']' expected.  TS1005

    66 | }
    67 | 
  > 68 | export type ArrayKeys<T> = keyof { [P in keyof T as T[P] extends any[] ? P : never]: P };
       |                                                  ^
    69 | 
    70 | export class Scope {
    71 |     constructor(path: NodePath, parentScope?: Scope);

I don't understand much about frontend, so I could use all the help I can get.