Combining Providers Riverpod

i'm trying to learn Riverpod and i use this example below to combine two providers, but the value of the dropDownButton never change and stay as the first value of the first dropDownItem , i changed the ConsumerWidget to ConsumerStatefulWidget also and nothing change, if there any help please.

 final cityProvider = StateProvider<String>((ref) => 'Country one');
    final weatherProvider = StateProvider((ref) {
    final city = ref.watch(cityProvider);
     return city == 'Country one'
      ? '25'
      : city == 'Country two'
          ? '30'
          : '50';
     });

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

      @override
      Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Combining Providers with Firebase'),
      ),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => const SecondScreen(),
              ));
            },
            child: const Text('Go to next Page')),
      ),
    );
  }
}

class SecondScreen extends ConsumerWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context, ref) {
    String? city = ref.watch(cityProvider);
    final weather = ref.watch(weatherProvider);
    return Scaffold(
        appBar: AppBar(
          title: const Text('Combining Providers Second Screen'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownButton(
                value: city,
                items: const [
                  DropdownMenuItem(
                    value: 'Country one',
                    child: Text('Country one'),
                  ),
                  DropdownMenuItem(
                    value: 'Country two',
                    child: Text('Country two'),
                  ),
                  DropdownMenuItem(
                    value: 'Country three',
                    child: Text('Country three'),
                  ),
                ],
                onChanged: (value) {
                  city = value;
                },
              ),
              Text(
                weather,
                style: const TextStyle(fontSize: 40),
              ),
            ],
          ),
        ));
  }
}

may i need to change the first Class or need to use listen instead of read ?

You're not updating the value of the provider correctly. Change you onChanged method to

onChanged: (value) {
  ref.read(cityProvider.notifier).state = value!;
},