Empty space between navigator bar and TextInput after keyboard closed when using KeyboardAvoidingView on React Native

I'm using KeyboardAvoidingView on React Native (expo). Everyhing is fine until keyboard closed and there's permanent empty space after keyboard closed. You can see screenshots below.

Code:

export default function ChatPage({ chatId, other, onBack }) {
  return (
    <>
       <KeyboardAvoidingView
          style={styles.container}
          behavior={Platform.select({ ios: 'padding', android: 'height' })}
        >
        {!loaded ? (
          <View style={{ paddingTop: 40 }}><ActivityIndicator color={COLORS.primary} /></View>
        ) : (
          <FlatList
            ref={listRef}
            onLayout={() => listRef.current.scrollToEnd({ animated: true })}
            data={messages}
            keyExtractor={(item) => item.id}
            renderItem={renderItem}
            onScroll={onScroll}
            keyboardShouldPersistTaps="always"
            ListFooterComponent={loadingOlder ? <ActivityIndicator color={COLORS.primary} style={{ marginVertical: 12 }} /> : null}
            onEndReached={onEndReached}
          />
        )}
        {otherTyping && (
          <View style={styles.typingRow}><Text style={styles.typingText}>Typing...</Text></View>
        )}
        <View style={[styles.inputBarWrap, { paddingBottom: 0 }]}>
          <MessageInput chatId={chatId} uid={uid} other={other} disabled={!chatId || !uid} />
        </View>
      </KeyboardAvoidingView>
    </>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.backgroundDark },
  header: { paddingHorizontal: 12, paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#1d1f24', flexDirection: 'row', alignItems: 'center', gap: 8 },
  backBtn: { paddingHorizontal: 4, paddingVertical: 4, marginRight: 2 },
  headerAvatar: { width: 34, height: 34, borderRadius: 17, marginRight: 6, backgroundColor: '#333' },
  headerTitle: { color: COLORS.textLight, fontSize: 18, fontWeight: '600', flexShrink: 1 },
  empty: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.backgroundDark },
  emptyText: { color: COLORS.textSecondary },
  typingRow: { paddingHorizontal: 16, paddingVertical: 4 },
  typingText: { color: COLORS.textSecondary, fontStyle: 'italic', fontSize: 12 },
  inputBarWrap: { backgroundColor: COLORS.backgroundDark },
});

Screenshots:

State 1 (keyboard not opened): here

State 2 (keyboard opened and closed): here

I think you are having an issue with Android devices.
I faced the same issue, and this works for me. Try it out

  import { useSafeAreaInsets } from 'react-native-safe-area-context';

  const insets = useSafeAreaInsets();

        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          {...(Platform.OS === 'android'
            ? { keyboardVerticalOffset: keyboardOpen ? insets.top : -200 }
            : { keyboardVerticalOffset: insets.top })}
        >