Дочерний компонент не обновляется правильно с обновлением состояния в родительском компоненте

Просто у меня есть элемент списка, содержащий список имен, щелчок по любому элементу списка меняет цвет этого элемента, это моя логика:

const App = () => {

    const items = [
        {
            name: 'peter',
            id: 1
        },
        {
            name: 'Mark',
            id: 2
        },
        {
            name: 'john',
            id: 3
        }
    ]

    const [id, setId] = useState(null);
    const [names, setNames] = useState(items)

    const setClickedItemId = (id) => {
        setId(id)
    }

    const turnItemRed = () => {
        setNames(prev =>  prev.map(i => i.id === id ? {...i, color: 'red' } : i))

    }


    return (
        <div className="app">
            <ul className="items">
                {
                    names.map(i => {
                        return (
                            <Item 
                               item={i}
                                setClickedItemId={setClickedItemId}
                                turnItemRed={turnItemRed}
                            />
                        )
                    })
                }
            </ul>
        </div>
    )
}

function Item({item, ...props}) {
    const { name, id} = item;
    const { setClickedItemId, turnItemRed } = props;
    return (
        <li
            className={`${item.color === 'red' ? 'red' : ''}`}
            onClick={() => {
                setClickedItemId(id);
                turnItemRed()

            }}
        >{name}</li>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

Это отображает список элементов, мне нужно два щелчка мыши, чтобы элемент стал красным, что означает, что дочерний компонент не улавливает самую последнюю версию состояния, но:

Просто добавив эту строку кода перед оператором return в родительских компонентах,

const showingItems = names.map(i => i.id === id ? {...i, color: 'red'} : i)

а затем используя эту переменную showingItems для отображения списка вместо переменной состояния names, сделайте это правильно и не знаю почему

Итак, почему дочерние компоненты Items не получают самую последнюю версию состояния, в то время как сохранение состояния в переменной заставляет его работать ??