子コンポーネントのuseStateの初期値にpropsを使う場合

App.tsx

const App = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <div>{count}</div>
      <Child count={count} />
    </div>
  );
}

export default App;

Child.tsx

const Child = (props: { count: number }) => {
  const [count, setCount] = useState<number>(props.count);
  return <div>{count}</div>;
}

これでは、親のカウントしか更新されない

reactでは再レンダリングが起きる条件が

・stateが更新されたときは再レンダリング ・propsが更新されたときは再レンダリング ・親コンポーネントが再レンダリングされたときの子要素は再レンダリング

なので、子コンポーネントにコンソールを仕込んでやると
きちんと再レンダリングされているのがわかる

なぜ、子コンポーネントのcountが更新されないかというと

useState()の初期値は一度しかセットされないから

である

Child.tsx

const Child = (props: { count: number }) => {
  const [count, setCount] = useState<number>(props.count);
  useEffect(() => {
    setCount(props.count);
  }, [props.count]);

  return <div>{count}</div>;
}

子コンポーネントのcountを更新したいなら、
useEffectを使用するべきである