メッセージの送信時にチャットが2回表示されてしまう(React Native)

Question

メッセージを送信すると、以下のようにチャットが2回表示されてしまいます。

色々なサイトを参考にしているのでコードがぐちゃぐちゃですが、
ご教授いただければ幸いです。

import React, { useState,useEffect,useCallback } from 'react';
import { GiftedChat, Bubble } from 'react-native-gifted-chat';

export default function TalkScreen() {
  
  const [talk, setTalk] = useState([]);
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    
  /////////////////////////////////////////
  // fetchでDBから情報を取得してtalkにセット
  setTalk(json);
　/////////////////////////////////////////

　},[])
  
  useEffect(() => {

    // 表示を左右に分けるためにIDを割り振る
    const msg = talk.map(com => {

      
      if (com.speaker === 'A') {

        const data = {
          _id: 1,
          text: com.note,
          createdAt: com.time,
          user: {
            _id: 2,
            name: com.speaker,
            avatar:null,
          }
        }
        return data;

      }else if (com.speaker === 'B') {

        const data = {
          _id: 1,
          text: com.note,
          createdAt: com.time,
          user: {
            _id: 1,
            name: com.speaker,
            avatar:null,
          }
        }
        return data;

      }
    });

    // 割り振ったメッセージをmessagesにセット
    setMessages(msg);

  }, [talk])
  
  const renderBubble = .......  // ↑で割り振ったバブルの設定
  
　// 送信ボタンを押した処理
  function onSend(newMessage = []) {
    setMessages(GiftedChat.append(messages, newMessage));
  }
  
  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => onSend(newMessage)}
      placeholder="テキストを入力してください"
      renderBubble={renderBubble}
      user={{_id: 1}}
    />
  );
}

Answer 1

左右で割り振る際の_idを固定ではなくランダム化したら解決しました。

const data = {
  //////////////////変更箇所/////////////////
  _id:  Math.round(Math.random() * 1000000),
  //////////////////////////////////////////
  text: com.note,
  createdAt: com.time,
  user: {
    _id: 2, //←は固定で大丈夫でした
    name: com.speaker,
    avatar:null,
  }
}