Dropdown not showing my data

[joaquin-gs]

This is my first time trying to use this component, so I read the documentation and follow the usage instructions. According to that, I only needed to change the data but I only see '[object Object]' in the button as well as for each option in the dropdown.

Can someone please tell me what I did wrong?

Here is my code:

   const leaveData = [
      { id: 1, title: 'Personal' },
      { id: 2, title: 'Sick' },
      { id: 3, title: 'Maternity' },
      { id: 4, title: 'Paternity' },
      { id: 5, title: 'Unpaid' },
      { id: 6, title: 'Compensate' },
      { id: 7, title: 'Study' },
      { id: 8, title: 'Casual' },
      { id: 9, title: 'Special' },
   ]

   return (
      <View style={styles.container}>
         <View style={styles.header}>
            <Text style={styles.headerTxt}>Leave type</Text>
         </View>

         <SelectDropdown
            data={leaveData}
            onSelect={(selectedItem, index) => {
               console.log(selectedItem.title, index)
            }}
            renderItem={(item, index, isSelected) => {
               console.log(item, index)  // This effectively reveals the things I want to show are there.
               return (
                  <Text style={styles.dropdownItemTxtStyle}>{item}</Text>  // [object Object] is shown here. Why?
                  // I have also tried using item.title, with the same results.
               )
             }}
            showsVerticalScrollIndicator={true}
            dropdownStyle={styles.dropdownMenuStyle}
            dropdownOverlayColor={{ backgroundColor: '#E9ECEF' }}
            defaultValueByIndex={0}
         />

      </View>
   );

Thanks for any help.