Encountered two children with the same key, `undefined`. Keys should be unique so that components maintain their identity across updates

I’m getting below error:
ERROR Warning: Encountered two children with the same key, undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I Beileve, I’m geeting this error in DropDownPicker. I have used new Set, I believe it gives unique value but still I’m getting above error. Please help me out.

Below is my code:

const CarList = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState([]);
    const [error, setError] = useState(null);
    const [query, setQuery] = useState('');
    const [fullData, setFullData] = useState([]);
    const [selected, setSelected] = useState("");
    const [open, setOpen] = useState(false);
    const [childOpen, setChildOpen] = useState(false);
    const [filterOption, setfilteroption] = useState([
        
        {label: 'Model', value: 'Model'},
        {label: 'Year', value: 'Year'},
        {label: 'Color', value: 'Color'},
      ]);
      const [value, setValue] = useState(null);
      const [childvalue, setChildValue] = useState([]);
      const [childItem, setChilditem] = useState(null);

    
   
    useEffect(() => {
        setIsLoading(true);  
        fetch(`https://myfakeapi.com/api/cars/?seed=1&page=1&results=20`)
          .then(response => response.json())
          .then(response => {
            setData(response.cars);
            setFullData(response.cars);
      
            setIsLoading(false);
          })
          .catch(err => {
            setIsLoading(false);
            setError(err);
          });
      }, []);

      if (isLoading) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ActivityIndicator size="large" color="#5500dc" />
          </View>
        );
      }
    
      if (error) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 18}}>
              Error fetching data... Check your network connection!
            </Text>
          </View>
        );
      }


    const handleSearch = (text) => {
        const formattedQuery = text.toLowerCase();
        const filteredData = filter(fullData, user => {
          return contains(user, formattedQuery);
        });
        setData(filteredData);
        setQuery(text);
      };
      
      const contains = ({ car, car_model,car_color }, query) => {

      
        if (car.toLowerCase().includes(query) || car_model.toLowerCase().includes(query) || car_color.toLowerCase().includes(query)) {
          return true;
        }
      
        return false;
      };

     

const changeSelectOptionHandler = (item) => {
  const color = [...new Set(data.map((val) => val.car_color))];
  const model = [...new Set(data.map((val) => val.car_model))];
  const year = [...new Set(data.map((val) => val.car_model_year))];

  console.log("hi", item.value)
   setSelected(item.value);
   if (selected === "Color") {
    
    setChildValue(color)
  } else if (selected === "Model") {
    setChildValue(model)
  } else if (selected === "Year") {
    setChildValue(year)
  }
 };

    
     
      
      
     
      function renderHeader() {
        return (
            
          <View
            style={{
              backgroundColor: '#fff',
              padding: 10,
              marginVertical: 10,
              borderRadius: 20
            }}
          >
            <TextInput
              autoCapitalize="none"
              autoCorrect={false}
              clearButtonMode="always"
              value={query}
              onChangeText={(queryText) => handleSearch(queryText)}
              placeholder="Search"
              style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
            />
            
          
            <DropDownPicker onSelectItem={changeSelectOptionHandler}
     open={open}
     value={value}
     items={filterOption}
     setOpen={setOpen}
     setValue={setValue}
     setItems={setfilteroption}
     dropDownDirection="TOP"
  
     style={{
        padding: 5,
        margin: 5,
        width: 200,
        flexDirection: 'row'
       // borderRadius: 20
      }}
    /> 
               
   
             
               <DropDownPicker
       open={childOpen}
        items={childvalue}
    value = {childItem}
  setValue = {setChilditem}
        setOpen={setChildOpen}
        setItems={setChildValue}
        dropDownDirection="TOP"
      /> 
         
          </View>
          
        );
      }

 
  
    return (
     
      
        <View style={styles.container}>
      <Text style={styles.text}>Favorite Contacts</Text>
      <FlatList
      keyboardShouldPersistTaps="always"
       ListHeaderComponent={renderHeader}
        data={data}
        keyExtractor={({ id }) => id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Image
                source={{
                    uri: 'https://picsum.photos/200',
                  }}
              style={styles.coverImage}
            />
            <View style={styles.metaInfo}>
              <Text style={styles.title}>{`${item.car} ${
                item.car_model
              }`}</Text>
               <Text>Color: {`${item.car_color}`}</Text>
               <Text>Price: {`${item.price}`}</Text>
            </View>
          </View>
        )}
      />
    </View>
      
    );

 
}