The renderInputToolbar and renderSend are called multiple times when a new message arrives

[vvhuy298]

Issue Description

When a new message arrives, the message list state will be updated.
At this point, renderInputToolbar and renderSend will be called.
If messages keep arriving continuously, it will prevent new messages from being sent.

Steps to Reproduce / Code Snippets

Screen.Recording.2024-09-05.at.13.10.53.mov

...
const [messagesList, setMessagesList] = useState([]);
useLayoutEffect(() => {
const presenceChannel = echo
  .join(`chat.${currentRoomUuid}`)
  .listen('MessageReceived', (e: any) => {
    const body = JSON.parse(e.body);
    body._id = body.id;
    const messageIndex = messagesList.findIndex(
      (n: Response.MessageItem) => n.id === body.id
    );
    if (messageIndex === -1) {
      setMessagesList((previousMessages) =>
        [...previousMessages, body].sort((a, b) => b.order - a.order)
      );
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }
  });
return () => {
  if (presenceChannel != null) {
    presenceChannel.stopListening('MessageReceived');
    Echo.leave(`chat.${currentRoomUuid}`);
  }
};
}, [me, currentRoomUuid, messagesList]);
...
const SendButton = useCallback(
  (props: SendProps<IMessage>) => {
    console.log('render send button');
    const { text } = props;
    const textLength = text.trim().length;
    if (textLength === 0) {
      return (
        <TouchableOpacity
          onPress={onSendRoger}
          disabled={!me || sendingRoger}
        >
          <Image source={images.iconLike} style={styles.iconImage} />
        </TouchableOpacity>
      );
    }
    return (
      <Send
        {...props}
        containerStyle={{
          borderBottomWidth: 0,
          borderTopWidth: 0,
        }}
        disabled={!me}
      >
        <View style={[styles.iconImage, styles.displayCenterStyle]}>
          <SendMessageSvgIcon color={'red'} />
        </View>
      </Send>
    );
  },
  [me, sendingRoger]
);
...
const renderInputToolbar = useCallback((props) => {
  console.log('renderInputToolbar');
  return (
    <InputToolbar {...props} containerStyle={styles.inputToolbarStyle} />
  );
}, []);
...
return (
  <Animated.View
    style={[
      {
        flex: 1,
        backgroundColor: theme.palette.lightBlue2,
        paddingBottom: getBottomPadding(),
      },
    ]}
  >
    <GiftedChat
      messages={messagesList}
      keyboardShouldPersistTaps='never'
      alwaysShowSend
      infiniteScroll
      renderAvatar={null}
      maxComposerHeight={100}
      maxInputLength={9000}
      user={{
        _id: 1,
        name: 'User1',
      }}
      listViewProps={{
        initialNumToRender: 100,
      }}
      scrollToBottomOffset={400}
      bottomOffset={getBottomSpace()}
      onSend={onSendText}
      renderSend={SendButton}
      renderBubble={renderBubble}
      renderInputToolbar={renderInputToolbar}
      renderComposer={renderComposer}
    />
  </Animated.View>
);

Expected Results

renderInputToolbar and renderSend to not be called when messageList is updated

Additional Information

System:
  OS: macOS 13.6.5
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
  Watchman: 2024.04.22.00 - /usr/local/bin/watchman
Managers:
  CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
IDEs:
  Android Studio: 2021.1 AI-211.7628.21.2111.8193401
  Xcode: 15.2/15C500b - /usr/bin/xcodebuild
npmPackages:
  babel-preset-expo: ^9.5.1 => 9.5.2
  expo: ^49.0.16 => 49.0.16
  react: 18.2.0 => 18.2.0
  react-dom: ^18.2.0 => 18.2.0
  react-native: 0.72.3 => 0.72.3
  react-native-web: ~0.19.6 => 0.19.9
Expo Workflow: bare