'Line-through' style in react blinking for some reason

I've fetched a todo data from jsonplaceholder.typicode and I set up a action using redux fetching that data (I use thunk middleware). And I successfully get that data from jsonplaceholder to my component and I add a logic in reducer for toggling the todos:

//initState is { todos: [] }
case TOGGLE_TODO: 
  return {
    ...state,
    todos: state.todos.map(todo => {
      if (todo.id === action.payload) {
        return {
          ...todo, completed: !todo.completed
        }
      }
      return todo
    })
  }

But the problem is when I toggle a todo using checkbox, the 'line-through' style is blinking for some reason (it shows the strike in text but disappearing after I think .5 sec ) thats why I need a understanding why it happens, Is it because I fetched it in the internet? Or somethings wrong it the logic? Sorry for my noob question.

Here's my Todo component:

const dispatch = useDispatch()
const strikeStyle = {
  textDecoration: todo.completed ? 'line-through' : ''
} 

const onChangeHandler = () => {
 dispatch(toggleTodo(todo.id))
}

...
<label>
    <input onChange={onChangeHandler} type='checkbox' />
    <p style={strikeStyle}>{todo.title}</p>
</label>

I just add a bracket at my useEffect because If I didn't add a bracket, I think it continuing to fetch the data and keeping the default value of all the data thats why its blinking.

const dispatch = useDispatch()
const todos = useSelector(state => state.TodoReducer.todos)

useEffect(() => {
 dispatch(fetchTodoData())
}, [])

return (
  <div>
    {todos.map(todo => <Todo key={todo.id} todo={todo}/>)}
  </div>