Hovering over menu items on a ListTile highlights the list item that contains it and does not go away

With the following code below, when I click on the menu anchor button and hover my mouse over the menu items, the ListTile underneath it also gets highlighted. After that, toggling the menu off will still leave the ListTile "highlighted" and stays highlighted with no way of disabling it. How do I prevent that from happening?

DartPad Demo

Also, how are you supposed to debug this behavior in VSCode?

ListView.builder(  itemCount: tasks.length,  itemBuilder: (context, index) {    final task = tasks[index];    return Material(      key: Key(task.id.toString()),      type: MaterialType.transparency,      child: ListTile(        title: Text(task.name),        onTap: () async {},        trailing: MenuAnchor(          menuChildren: menuItems              .map(                (item) => Material(                  child: MenuItemButton(                    child: Text(item),                    onPressed: () {},                  ),                ),              )              .toList(),          builder: (context, controller, child) => IconButton(            icon: const Icon(Icons.more_vert),            onPressed: () {              if (controller.isOpen) {                controller.close();              } else {                controller.open();              }            },          ),        ),      ),    );  },)

Searching on the web and on the flutter repo for a mention of this behavior and I found none. I tried wrapping the MenuItemButton with Material but that didn't seem to help.