How to make dropdown visibility in flutter

I have a case where I want to make a dropdown containing options where when the user selects the KHS option, a new dropdown will appear below containing the INT list.
how do i make it i am a bit confused here.
maybe someone here can help me or have a recommendation for an article I've been looking for but haven't found anything suitable.

Thank you in advance.

> initialization

 List listItem = [
    'Transkrip Sementara',
    'KHS',
  ];
  List<int> listItem2 = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
  ];

> in widget

const SizedBox(
              height: 8,
            ),
            Container(
              width: double.infinity,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                  color: Colors.grey,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton<String>(
                    hint: const Text('Pilih Jenis Transkrip'),
                    value: selectedValue,
                    onChanged: (newValue) {
                      setState(() {
                        selectedValue = newValue!;
                        selectSmt = null!;
                      });
                    },
                    items: listItem.map((valueItem) {
                      return DropdownMenuItem<String>(
                        value: valueItem,
                        child: Text(
                          valueItem,
                        ),
                      );
                    }).toList(),
                  ),
                ),
              ),
            ),
            Visibility(
              visible: selectedValue != null,
              child: DropdownButton<int>(
                value: selectSmt,
                items: listItem2
                    .where((element) => element?.contains(selectedValue))
                    .map((value) {
                  return DropdownMenuItem<int>(
                    value: value,
                    child: Text(value as String),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    selectSmt = value!;
                  });
                },
              ),
            ),

and an error occurred

> what I want

It will be easier while using map. The keypoint is resetting second dropdown while changing main dropdown.

class DropDS extends StatefulWidget {
  const DropDS({super.key});

  @override
  State<DropDS> createState() => _DropDSState();
}

class _DropDSState extends State<DropDS> {
  List<int> listItem1 = List.generate(4, (index) => index + 10);
  List<int> listItem2 = [1, 2, 3, 4, 5, 6, 7, 8];

  //lets use map for easy access
  late final dropDownData = {
    'Transkrip Sementara': listItem1,
    'KHS': listItem2
  };

  String? selectedValue; // main type
  var selectSmt; // for listItem1 and listItem2

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Container(
          width: double.infinity,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: Colors.grey,
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                hint: const Text('Pilih Jenis Transkrip'),
                value: selectedValue,
                onChanged: (newValue) {
                  setState(() {
                    selectedValue = newValue!;
                    selectSmt = null;
                  });
                },
                items: dropDownData.keys.map((valueItem) {
                  return DropdownMenuItem<String>(
                    value: valueItem,
                    child: Text(valueItem),
                  );
                }).toList(),
              ),
            ),
          ),
        ),
        Visibility(
          visible: selectedValue != null,
          child: DropdownButton<int>(
            value: selectSmt,
            items: dropDownData[selectedValue]?.map((value) {
              return DropdownMenuItem<int>(
                value: value,
                child: Text(value.toString()),
              );
            }).toList(),
            onChanged: (value) {
              selectSmt = value;
              setState(() {});
            },
          ),
        ),
      ],
    ));
  }
}