Ошибка unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering

Ошибка возникает, когда я пишу что-то в textarea. Может кто-нибудь объяснить, как решить эту проблему, пожалуйста?

Code:

Dialogs.jsx:

import React from 'react';
import s from './Dialogs.module.css';
import DialogItem from './DialoItem/DialogItem';
import Message from './Message/Message';

const Dialogs = (props) => {   
  let onSendMessageClick = () => {
    props.sendMessage()
  }

  let onNewMessageChange = (e) => {
    let text = e.target.value
    props.updateNewMessageBody(text)
  }

    return (
        <div className={s.dialogs}>
            <div className={s.dialogsItems}>
                {props.dialogsPage.dialogs.map(d => <DialogItem name={d.name}  id={d.id} />)}
            </div>
            <div className={s.messages}>
                <div>{props.dialogsPage.messages.map(m => <Message message={m.message}/>)}</div>
                <div>
                    <div>
                        <textarea value={props.dialogsPage.newMessageBody}
                        onChange={onNewMessageChange}
                        placeholder='Enter your message'></textarea>
                        </div>
                    <div><button onClick={onSendMessageClick}>Send</button></div>
                </div>
            </div>
        </div>
    )
}

export default Dialog

dialogs-reducer.js:

const UPDATE_NEW_MESSAGE_BODY = 'UPDATE_NEW_MESSAGE_BODY'
const SEND_MESSAGE = 'SEND_MESSAGE'

let initialState = {
    messages: [
        { id: 1, message: 'Wish you were here' },
        { id: 2, message: 'Good buy blue sky' },
        { id: 3, message: 'Hey You', },
        { id: 4, message: 'Hey You' },
        { id: 5, message: 'Yo' }
    ],
    dialogs: [
        { id: 1, name: 'Sasha', src: 'https:/www.meme-arsenal.com/memes/b877babd9c07f94b952c7f152c4e264e.jpg' },
        { id: 2, name: 'Vlada', src: 'https://klike.net/uploads/posts/2019-03/1551511801_1.jpg' },
        { id: 3, name: 'Alex', src: 'https://www.meme-arsenal.com/memes/be50e6ba99654b5455027dcc82beb5b3.jpg' },
        { id: 4, name: 'Artem', src: 'https://cspromogame.ru//storage/upload_images/avatars/1299.jpg' },
        { id: 5, name: 'Timofey', src: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/8f/8f160b5e9d954380c4b14b0f5ff4295ec9c141df_full.jpg' },
        { id: 6, name: 'Dima', src: 'https://bygaga.com.ua/uploads/posts/2013-07/1373469484_kak_delayutsya_avatarki.jpeg' }
    ],
    newMessageBody: ''
}

const dialogsReducer = (state = initialState, action) => {
    switch (action.type) {
        case UPDATE_NEW_MESSAGE_BODY:
            debugger
            return {
                ...state,
                newMessageBody: action.body
            }
        case SEND_MESSAGE:
            let body = state.newMessageBody
            return {
            ...state,
            newMessageBody: '',
            messages: [...state.messages, {id: 6, message: body}]
        }
        default:
            return state
    }
}
export default dialogsReducer