我有一个数组，它被Map到一个react组件中，并为每个项目创建另一个react组件，如下所示：

import React, { FC, useState } from 'react'
import { v4 as uuidv4 } from 'uuid'

const Parent: FC = () => {

  const [testArray, setTestArray] = useState([0,1,2,3])

  const addToArray = (item: number) => {
    const newArray = [...testArray, item]
    setTestArray(newArray)
  }

  return <>
        <button onClick={() => addToArray(testArray.length)}>Add</button>
        {
            testArray.map(item => {
                return <ChildItem
                    value={item}
                    key={uuidv4()}
                ></ChildItem>
            })
        }
        </>    
}
export default Parent

addToArray函数只是向数组中添加一个元素。据我所知，react应该只渲染添加的项目，而不是重新渲染所有其他项目，因为这些项目的 prop 没有改变。
但是，当调用该函数时，似乎所有子级都被重新渲染。在ChildItem中，console.log（）为每个项运行。我只希望它为刚刚创建的项目运行。

import React, { FC } from 'react'

const ChildItem: FC<{ value: number }> = (props) => {

    console.log('render', props.value)

    return <>
        <li>{props.value}</li>
    </>
}

export default ChildItem

有没有人看到，我错过了什么？我还尝试将子项设置为备忘录组件（export default memo(ChildItem)），但这并没有什么不同。我用的是react 18.2.0