Почему флажок не проверяется? (reactjs)

Question

У меня странная ситуация, когда мой компонент приложения работает нормально, за исключением проверки флажка, и тот же компонент приложения, который я копирую и вставляю в другой проект, работает совершенно нормально. Я снова создал новый проект только с компонентом приложения, скопировал, вставил, тоже самое, все хорошо, кроме флажка. Может кто-нибудь объяснить мне, что здесь происходит? Как это возможно, что один и тот же компонент работает нормально в одном проекте, а в других нет? И я перезапустил все. Итак, вот мой код, просто список дел:

import React, { useRef, useReducer } from 'react'

function App() {

    const inputRef = useRef<HTMLInputElement>(null)

    const handleSubmit = (e: any) => {
        e.preventDefault()
        inputRef.current?.value !== "" && dispatch({ type: 'ADD_TODO', payload: inputRef.current?.value })
        inputRef.current && (inputRef.current.value = "")
    }

    const [todo, dispatch] = useReducer((state: any, action: any): any => {
        switch (action.type) {
            case 'ADD_TODO':
                return [...state, { id: state.length, name: action.payload, isCheck: false }]
            case 'CHECK_TODO':
                return state.filter((item: any, index: any):any => {
                    if (index === action.id) {
                        item.isCheck = !item.isCheck
                    }
                    return item
                })

        }
    }, [])

    const todos = todo.map((item: any, index: number) => {
        return (
            <li key={index}>
                <input type="checkbox" checked={item.isCheck} onChange={() => dispatch({ type: "CHECK_TODO", id: index })} />
                {item.name}
            </li>
        )
    })

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="Buy milk"
                    ref={inputRef}
                />
            </form>
            <ul>{todos}</ul>
        </div>
    )
}

export default App

здесь, в каком-то старом проекте работает нормально, я могу его проверить и снять:

здесь, в любом другом новом проекте вообще не работает:

Я не делал ничего необычного, создал его с помощью npx create-react-app . --template typescript

РЕДАКТИРОВАТЬ

Вот консольный журнал с фрагментом при нажатии на флажок «яйца» (не знаю, почему это рендеринг дважды, в проекте, который работает, он рендеринг только один раз):

case 'CHECK_TODO':
    return state.filter((item: any, index: any): any => {
        if (index === action.id) {
            item.isCheck = !item.isCheck
            console.log('click')
            console.log(`${index} === ${action.id}`)
            console.log(item.isCheck)
        }
        return item
    })

Answer 1

Наконец, выяснил, в чем проблема, так что дело в <React.StrictMode>. Единственная разница была в индексе. js, где в проекте, который работал нормально, у меня есть

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

, а в других -

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

А также поэтому компонент рендерился дважды .

Значит удаление тега <React.StrictMode> удаляет проблемы:)