Why does defining a component inside another component reset its state on every render?

export default function App() {
  const [likes, setLikes] = useState(0);
 
  function ReviewBox() {
    const [text, setText] = useState("");
    return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
  }
 
  return (
    <>
      <ReviewBox />
      <button onClick={() => setLikes(likes + 1)}>Helpful ({likes})</button>
    </>
  );
}