我正在使用react native并创建一个聊天应用程序。现在我在数组中有几个消息对象，当我键入消息并单击发送时，我现在在平面列表中呈现它们。在消息数组中添加消息后，我键入的消息变得清晰。但消息不会与其余消息一起添加到屏幕上。因为当我单击发送时，组件似乎不会重新呈现原因，消息从字符串中消失，但在列表数组中，该消息与其余消息一起成功添加
现在，你能告诉我这里的代码出了什么问题吗？

const ChatComponent = (props) => {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([
    { id: '1', text: 'Hello, how are you?', sender: 'John' },
    { id: '2', text: 'Im good, thanks for asking!', sender: 'Jane' },
    { id: '3', text: 'What have you been up to?', sender: 'John' },
    { id: '4', text: 'Not much, just working and taking care of some errands.', sender: 'Jane' },
  ]);

  const listRef = useRef(null);

  useEffect(() => {
    setMessages(messages);
  }, [messages]);

  const handleSend = () => {
    LayoutAnimation.configureNext({
        duration: 500,
        update: {
          type: LayoutAnimation.Types.easeInEaseOut,
        },
      }, () => {
        setMessages([...messages, { id: messages.length + 1, text: message, sender: 'Me' }]);
        setMessage('');
      });
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ref={listRef}
        data={messages}
        renderItem={({ item }) => (
          <View style={[styles.messageContainer, item.sender === 'Me' && styles.me]}>
            <Text style={[styles.sender, item.sender === 'Me' && styles.me]}>{item.sender}:</Text>
            <Text style={[styles.message, item.sender === 'Me' && styles.me]}>{item.text}</Text>
          </View>
        )}
        keyExtractor={item => item.id}
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Type a message..."
          value={message}
          onChangeText={text => setMessage(text)}
        />
        <TouchableOpacity style={styles.button} onPress={handleSend}>
          <Text style={styles.buttonText}>Send</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};