I have try to make custom Picker for my app . all are working fine but when i click on Category it show list of item but when click on that it did not retrieve data to show replace Category to selected item.

When Click on Category it show list of item in modal .then when click on any item on model . I want to show on Category
click on Category
it show model of data
selected data
when select any data from list it close the Modal and show that selected item on Category.
the Result I want is this
result i want
this is following code ..

AppPicker.js

import React, { useState } from "react";
import {
  View,
  StyleSheet,
  Platform,
  TextInput,
  StatusBar,
  TouchableWithoutFeedback,
  Modal,
  Button,
  FlatList,
} from "react-native";

import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
import defaulStyles from "../config/styles";

import AppText from "./AppText";
import Screen from "./Screen";
import PickerItem from "./PickerItem";

function AppPicker({
  icon,
  items,
  onSelectItem,
  style,
  placeholder,
  selectedItem,
}) {
  const [modelVisible, setModelVisible] = useState(false);
  return (
    <>
      <TouchableWithoutFeedback onPress={() => setModelVisible(true)}>
        <View style={styles.container}>
          <MaterialCommunityIcons
            name={icon}
            size={25}
            color={colors.medium}
            style={styles.icon}
          />
          <AppText style={styles.text}>
            {selectedItem ? selectedItem.label : placeholder}
          </AppText>
          <MaterialCommunityIcons
            name="chevron-down"
            size={25}
            color={colors.medium}
          />
        </View>
      </TouchableWithoutFeedback>
      <Modal visible={modelVisible} animationType="slide">
        {/* if face problem remove the screen */}
        <Screen>
          <FlatList
            data={items}
            keyExtractor={(item) => item.value.toString()}
            renderItem={({ item }) => (
              <PickerItem
                label={item.label}
                onpress={() => {
                  setModelVisible(false);
                  onSelectItem(item);
                  console.log(item);
                }}
              />
              //   consolelog not show data
            )}
          />
          <Button title="Close" onPress={() => setModelVisible(false)} />
        </Screen>
      </Modal>
    </>
  );
}
const styles = StyleSheet.create({
  container: {
    borderRadius: 25,
    backgroundColor: colors.light,
    flexDirection: "row",
    padding: 10,
    width: "100%",
    marginVertical: 10,
    paddingTop: Platform.OS == "android" ? StatusBar.currentHeight : 0,
  },
  icon: {
    marginRight: 10,
  },
  text: {
    flex: 1,
  },
});
export default AppPicker;

my main App.js

import { useState } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Switch,
  Text,
  TextInput,
  View,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import Screen from "./components/Screen";
// import constant from "constant";

import AppInputText from "./components/AppInputText";
import AppPicker from "./components/AppPicker";

const categories = [
  { label: "furniture", value: 1 },
  { label: "Electronics", value: 2 },
  { label: "Cloths", value: 3 },
  { label: "Mobile", value: 4 },
];

export default function App() {
  const [category, setCategory] = useState();
  return (
    <Screen>
      <AppPicker
        selectedItem={category}
        onSelectItem={(item) => setCategory(item)}
        items={categories}
        icon="apps"
        placeholder="Category"
      />
      <AppInputText icon="email" placeholder="Email" />
    </Screen>
  );
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f4f4f4",
    flex: 1,
    paddingTop: 44,
  },
  textinput: {
    fontSize: 20,
  },
  appPickerSty: {
    paddingBottom: 5,
    color: "red",
  },
});

note: Apptext and Screen are my custom component its for style it does not effect the code