Reactjs – How to implement a useWatch in React

I have implemented two hooks. They are useWatch1 and useWatch2, respectively.

The function of useWatch is to execute a cb function when the listening value changes.

The user first clicks the ADD COUNT button a few times, and then the count value will increase. Then the user clicks the ADD ID button, and the count value will be set to 0. useWatch2 meets expectations, but useWatch1 cannot. I would like to know why?

import { useRef, useState } from "react";

function useWatch1(current, cb) {
  const isFirstRender = useRef(true);
  const prevRef = useRef(null);

  if (isFirstRender.current) {
    prevRef.current = current;
    isFirstRender.current = false;
  } else if(prevRef.current !== current){
    prevRef.current = current;
    cb();
  }
}

function useWatch2(current, cb) {
  const [prev, setPrev] = useState(current);

  if (current !== prev) {
    setPrev(current);
    cb();
  }
}

function MyCpm({ id }) {
  const [count, setCount] = useState(0);

  // useWatch1(id, () => {
  //   setCount(0);
  // });

  useWatch2(id, () => {
    setCount(0);
  });

  console.log("render", count);

  return (
    <>
      <button
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        ADD COUNT
      </button>
      <span>count: {count}</span>
      <span>-----</span>
      <span>id: {id}</span>
    </>
  );
}

function App() {
  const [id, setId] = useState(0);

  return (
    <>
      <button
        onClick={() => {
          setId((id) => id + 1);
        }}
      >
        ADD ID
      </button>
      <MyCpm id={id}></MyCpm>
    </>
  );
}

export default App;