问为什么我的组件在使用map后没有更新？

EN

import React, {ChangeEventHandler, Component} from "react";
import {connect} from 'react-redux';
import {RootState} from "typesafe-actions";
import {getMessage} from "./store/selectors";
import {submitComment} from './store/actions'

const mapDispatchToProps = {
    submit: submitComment
};

const mapStateToProps = (state: RootState) => {
    return {
        article: getMessage(state.article, 1)
    }
}

type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;

type State = {
    value: string
}

class Todo extends Component<Props, State> {
    readonly state = {value: ''}


    public render() {
        return (
            <div>
                <h1>{this.props.article?.title}</h1>

                {this.props.article?.comments.map((comment) => <li key={comment.title}>{comment.title}</li>)}

                <input type="text" onChange={this.onChange}/>

                <button onClick={this.handleSubmit}>submit</button>
            </div>
        )
    }

    private handleSubmit = () => {
        this.props.submit(this.state.value);
    }

    private onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
        this.setState({value: e.currentTarget.value});
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todo);

import {createReducer, PayloadAction} from "typesafe-actions";
import * as actions from './actions';

interface Comment {
    title: string
}

interface Article {
    title: string
    comments: Comment[]
}

interface App {
    articles: Map<number, Article>
}

const initState: App = {
    articles: new Map<number, Article>([
        [1, {title: 'article', comments: [{title: 'comment-1'}, {title: 'comment-2'}]}]
    ])
}

export const articleReducer = createReducer<App>(initState)
    .handleAction(actions.submitComment, (state: App, action: PayloadAction<string, string>) => {
        const article = state.articles.get(1)
        article?.comments.push({title: action.payload})

        console.log(article?.comments);

        return {
            articles: state.articles
        }
    });


export default articleReducer;

export type ArticleState = ReturnType<typeof articleReducer>;

import {createAction} from "typesafe-actions";

export const submitComment = createAction("SUBMIT_COMMENT", (title: string) => (title))();