react-hook-form Controller component does not acknowledge react-native-element-dropdown input when filled

Question

I am relatively new to React Native and am using JavaScript and Expo. I would like to dynamically change the format of my last input based on the value selected in the second input. However, currently the change only occurs when I click the submit button. Could you provide any guidance on how to address this issue?

I am building a form using React-Hook-Form and have placed the Controllers in separate files. Here are the two files:

dropdowncomponent.js

import React        from 'react';
import {Text, View }    from 'react-native';
import GlobalStyles from './globalstyles.js';
import { Controller }   from 'react-hook-form';
import { Dropdown } from 'react-native-element-dropdown';

const DropdownController = (props) => {
    return(
        <View style={{...GlobalStyles.mainBlock,}}>
            <Text>{props.description}</Text>
            <Controller
                    control={props.control}
                    rules={{required: true,}}
                    render= { ({ field: { onChange, onBlur, value }, fieldState: {isTouched}}) => (
                                    <Dropdown
                                            data={props.data}
                                            maxHeight={400}
                                            labelField="label"
                                            valueField="value"
                                            placeholder={!isTouched ? props.label : '...'}
                                            value={props.control._formValues[props.value]}
                                            onFocus={() => onBlur(true)}
                                            onBlur={() => onBlur(false)}
                                            onChange={(item)=>{
                                                            onChange(item.value);
                                                            onBlur(false);
                                                    }}
                                    />
                            )}
                    name={props.value}
            />
            {props.control._formValues[props.value] == "" && <Text style={{color: 'red',}}>{props.label} is required*</Text>}
        </View>



    )
}

export default DropdownController;

formscreen.js:

import React, {Component}           from 'react';
import {Text }                  from 'react-native';
import { Button }               from 'react-native-paper';
import {ScrollView, View }          from 'react-native';
import Constants                from "expo-constants";
import { FieldError, useForm, Controller }  from 'react-hook-form';
import GlobalStyles             from '../components/globalstyles.js';
import TextInputController          from '../components/textinputcontroller.js';
import DropdownController           from '../components/dropdowncontroller.js';


function formScreen(props) {
    const habit_types = [
    { label: 'Tick', value: 'tick' },
    { label: 'Timestamp', value: 'timestamp' },
    { label: 'Value', value: 'value' },
    { label: 'Duration', value: 'duration' },
    { label: 'Timeframe', value: 'timeframe' },
    { label: 'Sequence', value: 'sequence' },
        ];
    const onSubmit = data => console.log(data);

    const { control, handleSubmit, formState: { errors } } = useForm({
        defaultValues: {
            name: 'x',

            start_value: 'x',
            
            type: 'Tick',
            
        }
    });
    console.log(control._formValues)
    return(
        <View style={{...GlobalStyles.container,}}>
            <Text>New habit</Text>
            <View style={{...GlobalStyles.bigContainer,}}>
                <ScrollView>
                    <TextInputController control={control} value="name" label="Habit Name"/>
                    <DropdownController 
                        control={control} 
                        value="type" 
                        description="Type of habit" 
                        label="Habit Type" 
                        data={habit_types}
                    />
                    { control._formValues.type === 'timestamp' ?
                        <SetTimerController 
                            control={control} 
                            value="start_value" 
                            description="What is your start Value" 
                        />
                    :
                        <TextInputController control={control} value="start_value" label="Start Value"/>
                    }
                    
                    <Button 
                        onPress={handleSubmit(onSubmit)}
                        uppercase={false}
                        style={{...GlobalStyles.mainColor,}}
                    >Submit</Button>
                </ScrollView>
            </View>
        </View>
    );
}

export default formScreen;

I attempted to follow the instructions provided in this thread: react-hook-form Controller component does not acknowledge react-native-dropdown-picker input as filled. However, I'm unsure why a callback function is necessary and the suggested solution did not resolve my issue. Furthermore, the syntax used in this code is in TypeScript, which I am not yet familiar with.

As a newcomer to Stack Overflow, I would appreciate any feedback on how to improve my problem-solving approach and communication.