use of state mixin in getx

state.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(GetMaterialApp(
    initialRoute: '/home',
    getPages: [
      GetPage(
        name: '/home',
        page: () => HomePage(),
      ),
      GetPage(
        name: '/city',
        page: () => CityPage(),
        binding: CityBinding(),
      ),
    ],
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HOME')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Get.toNamed('/city'),
          child: Text('Go to Cities'),
        ),
      ),
    );
  }
}

class CityBinding extends Bindings {
  @override
  void dependencies() {
    Get.put(Dio());
    Get.put(CityController(dio: Get.find()));
  }
}

class CityModel {
  CityModel({
    this.abbreviation,
    this.name,
  });

  String abbreviation;
  String name;

  factory CityModel.fromJson(Map<String, dynamic> json) => CityModel(
        abbreviation: json["sigla"],
        name: json["nome"],
      );

  static List<CityModel> listFromJson(list) =>
      List<CityModel>.from(list.map((x) => CityModel.fromJson(x)));
}

class CityController extends GetxController with StateMixin<List<CityModel>> {
  final Dio dio;

  CityController({this.dio});

  @override
  void onInit() {
    findAllCities();
    super.onInit();
  }

  findAllCities() {
    const String url = 'https://servicodados.ibge.gov.br/api/v1/localidades/estados';

    dio.get(url).then((result) {
      List<CityModel> data = CityModel.listFromJson(result.data);
      change(data, status: RxStatus.success());
    }, onError: (err) {
      change(null, status: RxStatus.error(err.toString()));
    });
  }
}

class CityPage extends GetView<CityController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Cities')),
      body: Container(
        child: controller.obx(
          (state) => ListView.builder(
            itemCount: state.length,
            itemBuilder: (context, index) {
              return Text(state[index].name);
            },
          ),
          onLoading: Center(child: CircularProgressIndicator()), // optional
          onError: (error) => Center(                            // optional
            child: Text('Error: $error',
              style: TextStyle(fontSize: 18),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

As at this moment controller.obx is null why is this so?