How to set array stored in Firebase (as values) to Dropdown and bind to previous dropdown in Flutter

I am doing a flutter project in which I have data stored in Firebase as follows:

Company & their recharge categories (For ex. company Asiacell has following recharge categories) :

The recharge values are stored as a number Array. I am saving this key value pair of each company (3 companies in total) in a Map.

Map phoneCompany = new Map<String, dynamic>();
String client, company, rechargeAmount;

Now I need 3 dropdowns as follows:

  1. Selects Client or Shopkeeper - Done
  2. Populates 3 company names if the above is only Client - Done (disables when Shopkeeper is selected)
  3. Based on 2 above, it should populate the recharges as stored in firebase.

While I populated list of companies using:

Iterable companies = phoneCompany.keys;

And

>  items: companies.map<DropdownMenuItem<String>>((String val) {
          return DropdownMenuItem<String>(
            value: val,
            child: Text('${val}'),
          );
        }).toList(),

I am not getting any idea how to populate the list of recharges using company name selected by user. I wrote a function to select appropriate recharge list from Map using company name but fails. Though when i tried to print it (the recharges for a company) it prints fine, but the moment that list/array is being used in items, I get various errors.

My Recharge class:

class RechargeValue extends StatefulWidget {
@override
_RechargeValueState createState() => _RechargeValueState();
}

class _RechargeValueState extends State<RechargeValue> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton<String>(
        hint: Text(
          'Select Recharge Amount',
          style: TextStyle(
            color: Colors.red,
          ),
        ),
        value: rechargeAmount,
        icon: const Icon(Icons.arrow_downward),
        iconSize: 55,
        dropdownColor: Colors.white,
        elevation: 16,
        style: const TextStyle(color: Colors.deepPurple, fontSize: 18),
        underline: Container(
          height: 2,
          color: Colors.deepPurpleAccent,
        ),
        onChanged: (newValue) {
          setState(() {
            rechargeAmount = newValue;
          });

          print(rechargeAmount);
        },
        items:  getRechar().map<DropdownMenuItem<String>>((String val) {
          return DropdownMenuItem<String>(
            value: val,
            child: Text('${val}'),
          );
        }),
      ),
    );
  }

  getRechar() {
    List<String> lists = [];
    if (company == null || client == 'Shopkeeper') {
      lists = ['1000', '2000', '3000', '4000', '5000'];
    } else {
      var listCharges = phoneCompany[company] as List;
      listCharges.forEach((element) {
        lists.add(element.toString());
      });
    }

    print(lists);

    return lists;
  }
}

I had so many errors that it is difficult to recall which approach gave what error, this is the error I get for above approach

======== Exception caught by widgets library =======================================================

The following _TypeError was thrown building RechargeValue(dirty, state: _RechargeValueState#7a12b):
type ‘MappedListIterable<String, DropdownMenuItem>’ is not a subtype of type ‘List<DropdownMenuItem>?’

The interface :

Any help would be appreciated to tell me how to create 3rd dropdown using array of recharges stored in map.