A class-based custom hook causes StateError (Bad state: Type mismatch between hooks)

Question

I'm trying to define a custom hook by using flutter_hooks.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ColorCounter {
  ColorCounter({
    required this.color,
    required this.counter,
  });

  final Color color;
  final ValueNotifier<int> counter;
}

ColorCounter useColorCounter({
  Color defaultColor = Colors.black,
  Color highlightColor = Colors.red,
  int initialValue = 0,
  int factor = 3,
}) {
  return use(_ColorCounterHook(
    defaultColor: defaultColor,
    highlightColor: highlightColor,
    initialValue: initialValue,
    factor: factor,
  ));
}

class _ColorCounterHook extends Hook<ColorCounter> {
  const _ColorCounterHook({
    this.defaultColor = Colors.black,
    this.highlightColor = Colors.red,
    this.initialValue = 0,
    this.factor = 3,
  });

  final Color defaultColor;
  final Color highlightColor;
  final int initialValue;

  final int factor;

  @override
  _ColorCounterHookState createState() => _ColorCounterHookState();
}

class _ColorCounterHookState
    extends HookState<ColorCounter, _ColorCounterHook> {
  @override
  ColorCounter build(BuildContext context) {
    final counter = useState(hook.initialValue);
    final color = counter.value % hook.factor == 0
        ? hook.highlightColor
        : hook.defaultColor;
    return useMemoized(
      () => ColorCounter(
        color: color,
        counter: counter,
      ),
      [color],
    );
  }
}

However the error had occurred:

StateError (Bad state: Type mismatch between hooks:
- previous hook: _ColorCounterHook
- new hook: _StateHook<int>
)

How can I use useState() or built-in hooks in a custom hook class?