KeyboardAvoidingView doesn't work on selecting emojis from the keyboard

Question

The KeyboardAvoidingView covers the TextInput UI while selecting emojis from the virtual keyboard.

Here is a sample code, KeyboardAvoidingView in this case works fine on entering the text from the virtual keyboard. however, on switching to the emoji picker in the virtual keyboard the automatically adjusted padding | height has no effect and the TextInput gets covered under the virtual keyboard.

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text,,TouchableWithoutFeedback, Keyboard } from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Keyboard Avoiding View</Text>
          ...
          <FlatList 
          ...
          <TextInput placeholder="Username" style={styles.textInput} />
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 50
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
});

export default KeyboardAvoidingComponent;