React useEffectのクリーンアップタイミング

import {useEffect, useState} from "react";

const Foo = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const timerId = setInterval(() => {
      console.log(message);
    }, 1000);

    return () => {
      console.log('clear');
      clearInterval(timerId);
    }
  }, [message]);

  return (
    <div>
      <h2>Foo</h2>
      <input onChange={e => setMessage(e.target.value)} />
    </div>
  );
};

export default Foo;