dropdown with dynamic options based on api response

Question

I'm using flutter for app development and i'm stuck at a point

TextFormField(
                    controller: _streetNameSearchController,
                    focusNode: _streetNameFocusNode,
                    onChanged: (input) {
                      if (input.isNotEmpty) fetchDropdownOptions(input);
                    },
                    decoration: const InputDecoration(
                      hintText: 'Gwarko C32',
                      // ... your existing decoration properties ...
                    ),
                  ),

This is my textField on every key input there is an api that gets called which is as:

Future<void> fetchDropdownOptions(String input) async {
debugPrint('fetchDropdownOptions called with input: $input');
try {
  final List<StreetListResponse> streetlist =
      await UserRepository().getStreetList(input, widget.storeId!);
  debugPrint('streetlist: $streetlist');
  setState(() {
    finalStreetlist = [];
    finalStreetlist = streetlist;
  });
} catch (error) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Something went wrong'),
    ),
  );
}

}

Now the response will gets updated to state variable finalStreetList and I've to display the those list as dropdown on everytime it changes so that user can pick one from them

I've tried using autocomplete as

Autocomplete<StreetListResponse>(
                    optionsBuilder: (TextEditingValue textEditingValue) {
                      return finalStreetlist
                          .where((StreetListResponse option) {
                        return option.streetName!
                            .toLowerCase()
                            .contains(textEditingValue.text.toLowerCase());
                      }).toList();
                    },
                    onSelected: (StreetListResponse selectedValue) {
                      _streetNameSearchController.text =
                          selectedValue.streetName!;
                      setState(() {
                        selectedStreet = selectedValue;
                      });
                    },
                    fieldViewBuilder: (BuildContext context,
                        TextEditingController controller,
                        FocusNode focusNode,
                        VoidCallback onFieldSubmitted) {
                      return TextFormField(
                        controller: _streetNameSearchController,
                        onChanged: (input) {
                          fetchDropdownOptions(input);
                        },
                        decoration: const InputDecoration(
                          hintText: 'Gwarko C32',
                        ),
                      );
                    },
                    optionsViewBuilder: (BuildContext context,
                        AutocompleteOnSelected<StreetListResponse>
                            onSelected,
                        Iterable<StreetListResponse> options) {
                      return Material(
                        elevation: 4.0,
                        child: ListView(
                          children: options
                              .map<Widget>(
                                  (StreetListResponse option) => ListTile(
                                        title: Text(option.streetName!),
                                        onTap: () {
                                          onSelected(option);
                                        },
                                      ))
                              .toList(),
                        ),
                      );
                    },
                  ),

and i notice that api is being called but the option is not displaying.

so how can i do that??