Flutter Shows SnackBar over bottomsheet and below it

Question

Hello im struggling to get the new way of showing a Snackbar to display over a bottomsheet. With the below code the Snackbar shows over the top of the bottomsheet but also under the bottom sheet.

Maybe this is expected behaviour?

When I dismiss the bottom sheet, the snackbar disappears with it, but reveals another snackbar under it

My code:

onTap: () {
  showTaskInfo(context, taskDetails.taskID);
},

//show bottom sheet - (parent is Scaffold)

Future<dynamic> showTaskInfo(BuildContext context, int taskID) {
  final GlobalKey<ScaffoldState> modelScaffoldKey = GlobalKey<ScaffoldState>();
  return showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Scaffold(key: modelScaffoldKey, body: TaskInfo(taskID, modelScaffoldKey));
      });
}

//TaskInfo is a RiverPod state Widget
class TaskInfoState extends ConsumerState<TaskInfo> {
  @override
  Widget build(BuildContext context) {
     showSnackBar(context, widget.modelScaffoldKey)
  }
}

void showSnackBar(BuildContext context, GlobalKey<ScaffoldState> modelScaffoldKey) {
 
//THIS WORKS! But is depreciated
  //modelScaffoldKey.currentState!.showSnackBar(snackBarDetails);
  
//This shows a snackbar on the app main scaffold and the scaffold for bottomsheet scaffold
  ScaffoldMessenger.of(context).showSnackBar(snackBarDetails);
}

As the comments suggest Using a key still works as expected.

But using scaffoldMessenger with context shows the snack bar below the bottomsheet and on top

I think this is a context issue, Pretty sure I should be using the context from the scaffold.. which I think I am??