React-Select --- How to get default value and overwrite the default value when user selected another option

Question

Below is my react-select, field.value is the value that return from API. For example, field.value is 'Active'.

So, my frontend will show 'Active' and this is what I want, but if I select another option which is 'Inactive', it wont change the value and keep displaying the option 'Active'.

My question is how to change the default value('Active') to another selected value('Inactive')?

Thanks

    const methods = useFormContext();
    const [selectedOption, setSelectedOption] = useState("none");
    const options = [
        { value: 'Active', label: 'Active' },
        { value: 'Inactive', label: 'Inactive' }
    ]
    const handleTypeSelect = e => {
        
        setSelectedOption(e.value);
    };
    return (
        <div>
            <Controller
                name="inventory_source_status"
                control={control}
                render={({ field }) => (
                    <Select 
                        {...field}
                        id="inventory_source_status"
                        className="mt-8 mb-16"
                        placeholder="Inventory Source Status *"
                        options={options}
                        onChange={handleTypeSelect}
                        value = {{ value: field.value, label: field.value } || ''}
                        required
                        error={!!errors.inventory_source_status}
                        helperText={errors?.inventory_source_status?.message}
                    />
                )}
            />
        </div>
        
    );