Error: "The expression doesn't evaluate to a function, so it can't be invoked." when using Riverpod's watch in Flutter

I'm trying to migrate my code from GetX to Riverpod in my Flutter project. However, I encountered an error that says "The expression doesn't evaluate to a function, so it can't be invoked" when using watch with Riverpod's Consumer.

Here's the code snippet where the error occurs:

 child: Consumer(
          builder: (ref, watch, child) {
            final startPausedText =
                watch(countDownControllerProvider).state.isAnimating;

           //  Rest of the code...
          },
        ),

The error specifically points to the line: final startPausedText = watch(countDownControllerProvider).state.isAnimating;. I'm not sure what could be causing this issue.

This is the complete code, which provides context for the problem:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:pomoworkojunio2023/home_screen/5.pomodoro_intervals/5.pomodoro_intervals.dart';

final countDownControllerProvider =
    StateProvider<CountDownController>((ref) => CountDownController());

class StartStopGroupButton extends ConsumerStatefulWidget {
  const StartStopGroupButton({Key? key}) : super(key: key);

  @override
  ConsumerState<StartStopGroupButton> createState() =>
      _StartStopGroupButtonState();
}

class _StartStopGroupButtonState extends ConsumerState<StartStopGroupButton> {
  late final countDownController;

  @override
  void initState() {
    super.initState();
    countDownController = ref.read(countDownControllerProvider);
  }

  @override
  Widget build(BuildContext context, ) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Consumer(
          builder: (ref, watch, child) {
            final startPausedText =
                watch(countDownControllerProvider).state.isAnimating;

            return FloatingActionButton.extended(
              heroTag: 'btn1',
              elevation: 0,
              backgroundColor: Colors.white,
              onPressed: countDownController.startPaused,
              label: Text(
                startPausedText,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 24.0,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Could someone please help me understand why I'm getting this error and how I can resolve it? I'm trying to use Riverpod's watch to access the state from the countDownControllerProvider and update the UI accordingly.

Thank you in advance for any assistance or guidance you can provide.

builder: (ref, watch, child) is not the proper parameters for a Consumer. You want (context, ref, child). And then you'll call ref.watch to do what you're trying to do with just watch