'package:flutter/src/material/search_anchor.dart': Failed assertion: line 940 pos 12: '_anchor != null': is not true

I am using the Search bar and Search Anchor in my Flutter project which is newly introduced with material3.

I am facing an error while moving back from the search view.

It moves back to the previous screen if we simply go to the search and move back from there.

But if we try to rebuild that widget to refresh the UI according to the text in the searchController. It gives me this error.

Failed assertion: line 940 pos 12: '_anchor != null': is not true.

The error can also be reproduced by moving to the search view and performing hot reload

This is my search anchor and search bar code

 SearchAnchor(
      viewLeading: IconButton(
          onPressed: () {
            controller.closeView("");
            FocusScope.of(context)
                .requestFocus(FocusNode());
          },
          icon:
              const Icon(Icons.arrow_back)),
      searchController: controller,
      isFullScreen: true,
      builder: (BuildContext context,
          SearchController controller) {
        return SearchBar(
          key: searchBarKey,
          padding:
              const MaterialStatePropertyAll<
                  EdgeInsets>(
            EdgeInsets.only(
              left: 8.0,
              right: 8.0,
            ),
          ),
          hintText: "Search your notes",
          hintStyle:
              const MaterialStatePropertyAll(
                  TextStyle(
                      fontSize: 16,
                      fontWeight:
                          FontWeight.normal,
                      color:
                          Colors.black54)),
          leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              _scaffoldKey.currentState!
                  .openDrawer();
            },
          ),
          focusNode: focusNode,
          shape: MaterialStatePropertyAll(
              RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.circular(
                          50))),
          controller: controller,
          onTap: () {
            controller.openView();
            FocusScope.of(context)
                .requestFocus(focusNode);
          },
          trailing: [],
        );
      },
      viewBuilder: (suggestions) {
        return Container(
          height: height,
          width: width,
          color: textFieldBackgoundColor,
          child: const Center(
              child: Icon(
            Icons.mood,
            color: Colors.black,
          )),
        );
      },
      suggestionsBuilder:
          (BuildContext context,
              SearchController controller) {
        return <Widget>[
          const Icon(Icons.abc)
        ];
      }),

I am not able to figure it out.

I fixed the issue by converting my StatelessWidget to StatefulWidget.

So for the people who face this issue in the future

If you are using StatelessWidget, try converting it to StatefulWidget.