¿Cómo puedo crear un componente para la fecha usando la biblioteca date-fns para poder tomar del usuario (fecha de cumpleaños) y almacenar los datos? He creado un componente de menú desplegable usando datos ficticios, así que quiero reemplazar los datos ficticios con datos reales de datos -fns, ¿cómo puedo construir días/meses/años de visualización de componentes (año actual- 1960)

componente del menú desplegable:

 const days = [ { num: '1', key: '1' }, { num: '2', key: '2' }, { num: '3 ', key: '3' }, { num: '4', key: '4' }, { num: '5 ', key: '5' }, { num: '6', key: '6' }, { num: '7', key: '7' }, { num: '8', key: '8' }, { num: '9', key: '9' }, { num: '10', key: '10' }, { num: ' 11', key: '11' }, ]; const Dropdown = ({ label, data }) => { const [selecteday, setSelecteday] = useState({ item: '' }); const DropdownButton = useRef(); const [visible, setVisible] = useState(false); const toggleFunction = () => { visible ? setVisible(false) : openDropdown(); }; const openDropdown = () => { setVisible(true); }; const onItemPress = item => { setSelecteday(item); console.log(item); setVisible(false); }; const renderItem = ({ item }) => ( <TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}> <Text style={styles.buttonText}>{item.num}</Text> </TouchableOpacity> ); const renderDropdown = () => { return ( <SafeAreaView style={styles.dropdown}> <FlatList data={days} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} /> </SafeAreaView> ); }; return ( <> <View style={{zIndex: 10}} > <TouchableOpacity onPress={() => toggleFunction()} ref={DropdownButton} style={styles.button} > <Text style={styles.buttonText}> {' '} {selecteday.item === '' ? label : selecteday.num} </Text> <MaterialCommunityIcons name="chevron-down" color={'#58abc8'} size={16} /> {visible == true ? renderDropdown() : null} </TouchableOpacity> </View> { visible ? <View style={styles.modal}> <TouchableOpacity style ={styles.overlay} onPress={toggleFunction} ></TouchableOpacity> </View>: null} </> ); };