How to create delayed effect with setTimeout and useEffect?

To set your state you need to use setActiveChat, in this case something like:

setActiveChat(previous => ({
  ...previous,
  messages: [...previous.messages, 'dsadsadsada']
}))

The set state function React provides can accept a function, which we'll use in this case to avoid race conditions. previous is the previous value of activeChat (We can't rely on activeChat itself being up to date yet since the current render may be out of sync with the state) Then we expand the existing state and add the new property.

In your comments you mention only changing properties, and I'm afraid it's really not recommended to change anything in state directly, there are several in depth explanations of that here (StackOverflow question), and here (Documentation).

Full example (StackBlitz):

import React, { useEffect, useState } from 'react';
import { render } from 'react-dom';
import './style.css';

interface Chat {
  messages: string[];
  poster: string;
}

const App = () => {
  const [activeChat, setActiveChat] = useState<Chat>({
    poster: 'Adam',
    messages: ['one', 'two', 'three'],
  });

  const [message, setMessage] = useState('');
  const [isBotChat, setIsBotChat] = useState(false);

  useEffect(() => {
    if (isBotChat) {
      setIsBotChat(false);
      setTimeout(() => {
        setActiveChat(previous => ({
          ...previous,
          messages: [...previous.messages, 'dsadsadsada']
        }))
        console.log('setTimeout completed');
      }, 500);
    }
  }, [isBotChat]);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (message !== '') {
      setActiveChat(previous => ({
        ...previous,
        messages: [...previous.messages, message]
      }))
      setMessage('');

      setTimeout(() => {
        setActiveChat(previous => ({
          ...previous,
          messages: [...previous.messages, 'dsadsadsada']
        }))
        console.log('setTimeout completed');
      }, 500);
    }
  };

  return (
    <div>
      <h1>Active Chat</h1>
      <div>
        {activeChat?.messages.map((m, index) => (
          <div key={index}>{m}</div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.currentTarget.value)}
        />
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
};

render(<App />, document.getElementById('root'));