Flutter list items and menu highlight weird interaction

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class Task {
  final String name;
  final int id;

  const Task(this.id, this.name);
}

final tasks = [
  const Task(1, 'First Task'),
  const Task(2, 'Second Task'),
  const Task(3, 'Third Task'),
  const Task(4, 'Fourth Task'),
];

final menuItems = [
  'Something Something',
  'Edit Task',
  'Delete Task',
];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: 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) => 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();
                    }
                  },
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}