How do I reset my datepicker component using Formik ResetForm() after handleSubmit?

I created a datepicker component from '@react-native-community/datetimepicker' that shows a placeholder title that changes into a selected date after the datetimepicker was chosen. But it would not reset back to its placeholder after handleSubmit while other components reset to their placeholder titles. I have tried modifying the Formik values but didn't work. Now I am thinking I made a mistake somewhere in creating the datepicker component such that it does not deem the title as its default state. Excerpt below:

function AppFormDate({ name, placeholder }) {
    const {errors, setFieldValue, touched, values} = useFormikContext();

    return (
        <React.Fragment>
            <AppDatePicker
                onSelectItem={(selectedDate) => setFieldValue(name, selectedDate)}
                placeholder={placeholder}
                value={values[name]}>
            </AppDatePicker>
            <AppErrorMessage
                error={errors[name]}
                visible={touched[name]}>
            </AppErrorMessage>
        </React.Fragment>
    );
}

function AppDatePicker({ icon, onSelectItem, placeholder }) {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState();
    const [show, setShow] = useState(false);
    const [title, setTitle] = useState(placeholder);

    const onSelect = (selectedDate) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);

        let tempDate = new Date(currentDate);
        let fDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate();
        // console.log(selectedDate)
        
        onSelectItem(fDate);
        setTitle(fDate.toString())
    }

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    }

    return (
        <View>
            <TouchableWithoutFeedback onPress={() => showMode('date')}>
                <View style={styles.container}>
                    {icon &&
                        <MaterialCommunityIcons
                            color={colors.black}
                            name={icon}
                            size={20}
                            style={styles.icon}>
                        </MaterialCommunityIcons>
                    }
                    {
                        onSelect ? (
                            <AppText style={styles.text}>{title}</AppText>
                        ) : (
                            <AppText style={styles.placeholder}>{placeholder}</AppText>
                        )
                    }
                    <MaterialCommunityIcons
                        color={colors.black}
                        name="chevron-down"
                        size={20}>
                    </MaterialCommunityIcons>
                </View>
            </TouchableWithoutFeedback>
            {show && 
                <DateTimePicker
                    display='default'
                    mode={mode}
                    onChange={(_, date) => onSelect(date)}
                    value={date}>
                </DateTimePicker>
            }
        </View>
    );
}