特定の配列要素を削除した際、mapで出力がおかしい

import React, {useState} from 'react';

export const LikeExist = (props) => {
  const [like, setLike] = useState(props.like);
  const saveLike = (e) => {
    e.preventDefault();
    setLike(e.target.value);
  }
  return (
    <li className="item" key={props.index.toString()}><input className="text-input" type="text"　value={like} onChange={saveLike} onBlur={() => props.editLike(like, props.index)}/><input className="submit" value="ー" type="submit" onClick={() => props.deleteLike(props.index)}/></li>
  )
}

import React, {useState} from 'react';
import { LikeExist } from './LikeExist';

export default function Likes(props) {
  const [like, setLike] = useState("");

  const saveLike = (e) => {
    e.preventDefault();
    setLike(e.target.value);
  }

  let likeInput = null;
  if (typeof document !== 'undefined') {
    likeInput = document.getElementById('addLike') as HTMLInputElement;
  }
  const submitTxt = (e) => {
    if(like !== "" && like !== null) {
      e.preventDefault();
      props.addLike(like);
      likeInput.value = "";
      setLike("");
    }
  }
  return (
  <section className="likes list-sec">
    <h2 className="list-ttl">好き</h2>
    <ul className="list">
      {props.likes.map((like: string, index: number) => {
        return (
          <LikeExist like={like} index={index} editLike={props.editLike} deleteLike={props.deleteLike}/>
        )
      })}
      <li className="item">
        <input
          className="text-input"
          type="text"
          id="addLike"
          placeholder="ここに文字を入力してください"
          onBlur={saveLike}
        />
        <input className="submit" value="＋" type="submit" onClick={submitTxt} />
      </li>
    </ul>
  </section>
  )
}

import React, {useState, useEffect} from 'react';
import {Profile, Likes, Dislikes} from '../../src/components/index';
import { db, FirebaseTimestamp } from '../../src/firebase';
import { useSelector, useDispatch } from 'react-redux';
import { getUserId, getUsername, getIsLogined, getLikes } from '../../src/reducks/users/selectors';
import { addLikesToStore, listenAuthState } from '../../src/reducks/users/operations';
import router from 'next/router';

export default function LoginedTop() {
  const selector = useSelector((state) => state);
  console.log(selector);
  const uid = getUserId(selector);
  const username = getUsername(selector);
  const isLogined = getIsLogined(selector);
  const likesFromStore = getLikes(selector);
  console.log("likesFromStore: " + likesFromStore);

  const dispatch = useDispatch();

  const [likes, setLikes] = useState([]);
  const [dislikes, setDislikes] = useState(["生玉ねぎ", "ゴキブリ", "怒られること", "ニセコイ", "The Crystal Ship"]);
  console.log(likes)
  console.log(likes.length)
  console.log(likesFromStore);
  console.log(likesFromStore.length);
  if(likesFromStore.length > 0 && likes.length === 0) {
    setLikes(likesFromStore);
  }

  useEffect(() => {
    if(!isLogined) {
      dispatch(listenAuthState());
    }
  });

  useEffect(() => {
    if(likes !== likesFromStore) {
      dispatch(addLikesToStore(likes));
    }
  }, [likes]);

  const addLike = (item: string) => {
    setLikes(prevLikes => {
      return [...prevLikes, item]
    });
  }

  const editLike = (item: string, index: number) => {
    let likesCopy = [...likes];
    likesCopy[index] = item;
    setLikes(likesCopy);
  }

  const deleteLike = (index: number) => {
    if(index !== null &&  index !== undefined) {
      let likesCopy = [...likes];
      likesCopy.splice(index, 1);
      setLikes(likesCopy);
    }
  }

  const addDislike = (item: string) => {
    setDislikes(prevDislikes => {
      return [...prevDislikes, item]
    });
  }
  const editDisLike = (item: string, index: number) => {
    dislikes[index] = item;
  }


  return (
    <>
      <Profile username={username} />
      <Likes likes={likes} addLike={addLike} editLike={editLike} deleteLike={deleteLike}/>
      <Dislikes dislikes={dislikes} addDislike={addDislike} editDislike={editDisLike}/>
    </>
  )
}

export const addLikesToStore = (likes) => {
  return async (dispatch, getState) => {
    dispatch(addLikesToStoreAction(likes));
    const state = getState();
    const uid = state.uid;
    if (uid !== "") {
      db.collection('users').doc(uid).update({
        likes: likes
      })
        .then(() => {
          console.log("AddLike Success!");
        })
        .catch((error) => {
          alert(`Error:${error}`);
        });
    }
  }
}