CountryDropDown doesn't change when initialCountryData State change

[miraklecode]

here an example on how my code works having a TextFormField that actually change when updateValue as called
countryDropDownCustomKey.currentState?.updateValue(_initialCountryData);
meanwhile the CountryDropDown doesn't

class CountryDropDownCustom extends StatefulWidget {
  CountryDropDownCustom({super.key, this.initialCountryData, required this.onChanged});
  PhoneCountryData? initialCountryData;
  final ValueChanged<PhoneCountryData> onChanged;

  @override
  State<CountryDropDownCustom> createState() => CountryDropDownCustomState();
}

class CountryDropDownCustomState extends State<CountryDropDownCustom> {
  PhoneCountryData? _initialCountryCode;
  late TextEditingController countryCode;

  void updateValue(PhoneCountryData? newValue) {
    setState(() {
      _initialCountryCode = newValue;
      countryCode = TextEditingController(text: _initialCountryCode?.countryCode?.toString() ?? '');
    });
  }

  @override
  void initState() {
    _initialCountryCode = widget.initialCountryData;
    countryCode = TextEditingController(text: _initialCountryCode?.countryCode?.toString() ?? '');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            flex: 1,
            child: TextFormField(
              controller: countryCode,
              decoration: textInputDecoration,
            )),
        const SizedBox(
          width: 5,
        ),
        Expanded(
          flex: 4,
          child: CountryDropdown(
            initialCountryData: _initialCountryCode,
            selectedItemBuilder: (phoneCountryData) {
              return Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 10.0),
                    child: CountryFlag(
                      height: 20,
                      width: 30,
                      countryId: phoneCountryData.countryCode!,
                    ),
                  ),
                  Flexible(
                    child: Text(
                      '+${phoneCountryData.phoneCode} - ${phoneCountryData.country}',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              );
            },
            listItemBuilder: (phoneCountryData) {
              return Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 2.0),
                    child: CountryFlag(
                      height: 20,
                      width: 30,
                      countryId: phoneCountryData.countryCode!,
                    ),
                  ),
                  Flexible(
                    child: Text(
                      '+${phoneCountryData.phoneCode} - ${phoneCountryData.country}',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              );
            },
            decoration: textInputDecoration,
            enableFeedback: true,
            menuMaxHeight: 300,
            iconSize: 18,
            printCountryName: false,
            onCountrySelected: widget.onChanged,
          ),
        ),
      ],
    );
  }
}