Flutter flutter_multi_formatter cannot update CountryDropDown initialCountryCode via setState

unfortunatelly is not what I need, here a full code where demostrate that I cannot update the second CountryDropDown based on the first one, meanwhile the 2nd TextFormField (that is just a reference) is changing, I guess that's a CountryDropDown issue... or not? I've tried everything see next example:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_multi_formatter/formatters/phone_input_formatter.dart';
import 'package:flutter_multi_formatter/widgets/country_dropdown.dart';
import 'package:flutter_multi_formatter/widgets/country_flag.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

GlobalKey<CountryDropDownCustomState> countryDropDownCustomKey = GlobalKey<CountryDropDownCustomState>();

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PhoneCountryData? _initialCountryData;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
              child: CountryDropDownCustom(
            key: const Key('first'),
            initialCountryData: PhoneCodes.getPhoneCountryDataByCountryCode('US')!,
            onChanged: (code) {
              setState(() {
                countryDropDownCustomKey.currentState?.updateValue(code);
              });
            },
          )),
          Expanded(
            child: CountryDropDownCustom(
              key: countryDropDownCustomKey,
              initialCountryData: _initialCountryData,
              onChanged: (code) {
                setState(() {
                  _initialCountryData = code;
                });
              },
            ),
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

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(() {
      log('updating... ${newValue!.countryCode ?? ''}');
      if (newValue?.countryCode != null) {
        _initialCountryCode = newValue;
        countryCode.text = newValue.countryCode ?? ''; //this is actually working
      }
      log('new value ${_initialCountryCode?.countryCode ?? ''}');
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //this is here just as a reference to see if the newValue is updated;
        Expanded(
            flex: 1,
            child: TextFormField(
              controller: countryCode,
            )),
        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,
                    ),
                  ),
                ],
              );
            },
            enableFeedback: true,
            menuMaxHeight: 300,
            iconSize: 18,
            printCountryName: false,
            onCountrySelected: widget.onChanged,
          ),
        ),
      ],
    );
  }
}