Initalize React Dropdown Picker with axios call

Question

I'm trying to initialize a dropdown (react-dropdown-picker) with data from the database which I retrieve through an axios call. I've many different ways, why can't I set the set with the data from the response? I get the below error:

items.filter is not a function. (In 'items.filter(function (item) {
        return item[_schema.parent] === undefined || item[_schema.parent] === null;
      })', 'items.filter' is undefined)

Here is my screen

 import React, { useState, useEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import { Text, View, StyleSheet, ScrollView } from "react-native";
import CustomInput from "../components/CustomInput";
import CustomDropDown from "../components/CustomDropDown";
import axios from "axios";

function CreateLeagueScreen(props) {
  const [leagueName, setLeagueName] = useState("");
  const [openDraftType, setOpenDraftType] = useState(false);
  const [draftTypeValue, setDraftTypeValue] = useState(null);
  const [draftTypeItems, setDraftTypeItems] = useState([]);
  const [openLeagueVisibility, setOpenLeagueVisibility] = useState(false);
  const [leagueVisibilityValue, setLeagueVisibilityValue] = useState(null);
  const [leagueVisibilityItems, setLeagueVisibilityItems] = useState([
    { label: "Public", value: "0" },
    { label: "Private", value: "1" },
  ]);

  useEffect(() => {
    axios
      .post("http://192.168.0.24:5000/getDraftTypes")
      .then((response) => {
        if (response.data) {
          setDraftTypeItems(response.data);
        }
      })
      .catch((error) => console.log(error));
  });

  const navigation = useNavigation();

  return (
    <ScrollView
      contentContainerStyle={{ flexGrow: 1 }}
      showsVerticalScrollIndicator={false}
      keyboardShouldPersistTaps="handled"
    >
      <View style={styles.titleContainer}>
        <Text style={styles.title}>Create League</Text>
      </View>
      <View style={styles.leagueInfoContainer}>
        <CustomInput
          icon="golf-outline"
          placeholder="League Name"
          value={leagueName}
          setValue={setLeagueName}
        />
        <CustomDropDown
          icon="beer-outline"
          open={openDraftType}
          value={draftTypeValue}
          items={draftTypeItems}
          setOpen={setOpenDraftType}
          setValue={setDraftTypeValue}
          setItems={setDraftTypeItems}
        />
        <CustomDropDown
          icon="eye-outline"
          open={openLeagueVisibility}
          value={leagueVisibilityValue}
          items={leagueVisibilityItems}
          setOpen={setOpenLeagueVisibility}
          setValue={setLeagueVisibilityValue}
          setItems={setLeagueVisibilityItems}
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flex: 1,
    top: 125,
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "darkslategrey",
    margin: 10,
  },
  leagueInfoContainer: {
    flex: 1,
    width: "80%",
    height: "30%",
    justifyContent: "center",
    margin: 50,
  },
});

export default CreateLeagueScreen;

Here is my CustomDropDown

import React from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import DropDownPicker from "react-native-dropdown-picker";

export default function CustomDropDown({
  open,
  value,
  items,
  setOpen,
  setValue,
  setItems,
  icon,
}) {
  return (
    <View style={styles.container}>
      <Ionicons style={styles.icon} name={icon} size={25} color="darkgreen" />
      <DropDownPicker
        style={styles.input}
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        listMode="SCROLLVIEW"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "90%",
    borderColor: "#ccc",
    borderWidth: 1,
    borderRadius: 15,
    margin: 3,
    flexDirection: "row",
    alignItems: "center",
    overflow: "hidden",
  },
  icon: {
    width: 30,
    height: 40,
    alignItems: "center",
    paddingLeft: 3,
    paddingTop: 5,
    borderBottomLeftRadius: 15,
    borderTopLeftRadius: 15,
    backgroundColor: "white",
    justifyContent: "center",
  },
  input: {
    width: "90%",
    height: 40,
    backgroundColor: "white",
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderColor: "white",
    borderBottomRightRadius: 15,
    borderTopRightRadius: 15,
    fontSize: 16,
  },
});

and here is my node js file where I call the DB

import connectionPool from "../utils/database.js";

const getDraftTypes = (req, res, next) => {
  // checks if email already exists
  let retrieveDraftTypes =
    "SELECT draft_type_id, draft_type_name FROM draft_type WHERE active = 1";
  let query = connectionPool.format(retrieveDraftTypes);
  connectionPool.query(query, (err, response) => {
    if (err) {
      console.error(err);
      return;
    }
    if (response) {
      res.json(response);
    }
  });
};

export { getDraftTypes };