[Updating Arrays in State] examples in the beta documentation are using impure function to explain concepts which doesn't seems right

Hi, learning react and going through the new react doc (beta).
I finished reading about pure functions, but then in a later section (update arrays in state), it showcase multiple examples that seem contradictory to the concept of pure functions in React...
OR I simply did not really understand that concept and If that is the case, I am sorry in advance.

let nextId = 0;

export default function List() {
  const [name, setName] = useState('');
  const [artists, setArtists] = useState([]);

  return (
    <>
      <h1>Inspiring sculptors:</h1>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => {
        setName('');
        artists.push({
          id: nextId++,
          name: name,
        });
      }}>Add</button>

  //rest of the code...

isnt using a variable from outside (in this case: let nextId = 0) and just modifying it against the concept of pure function in react?
If this is indeed an impure function, I just think it would be better to promote using pure functions in the visual examples just to not confuse new learners or at least mention that it was made on purpose.

リンクされている「Update Arrays in State」ドキュメントの「Adding to an array」セクションから始め、その例をPure Functionsのガイダンスと比較してください。nextIdとartists.pushの例に明確化または置き換えが必要かどうかを判断し、ドキュメントがこれらの概念を混同しなくなった時点で作業完了とします。