React Native - array doesn't seem to be updated state

I'm making wordle games for practice.

But there was a problem in the middle, so I wrote here to ask for help.

It was difficult to explain the problem situation, so I tried to show it in a video.(I'm not good at English...)

Please refer to the video(link) below.

https://drive.google.com/file/d/1AYO6_ja0ZGIdNK7i6X9i579kPG-XwYe2/view?usp=sharing

As you can see from the video, if you enter a word such as a word (ex. aaaaa) that is not in the correct answer list, it should be immediately initialized and disappeared like the first line.

However, in the second line, even if aaaaa is entered, letters still remain, and aaaaa disappears only when new letters are entered.

If you don't mind, please advise on these issues.

const Game = () => {
  const [isBasicColor, setIsBasicColor] = useState([]);
  const [data, setData] = useState([0, 1, 2, 3, 4]);
  const [userAnswer, setUserAnswer] = useState([]);
  const [correctColor, setCorrectColor] = useState([]); // green
  const [includingColor, setIncludingColor] = useState([]); // orange

  const checkAnswer = (m, n) => {
    for (let i = m; i < n; i++) {
      const newState = isBasicColor;
      newState[i] = false;
      setIsBasicColor(newState);
      if (userAnswer[i] === ANSWER[i - m]) {
        setCorrectColor((oldArray) => [...oldArray, true]);
        setIncludingColor((oldArray) => [...oldArray, false]);
      } else if (
        ANSWER.includes(userAnswer[i]) &&
        userAnswer[i] !== ANSWER[i - m]
      ) {
        setCorrectColor((oldArray) => [...oldArray, false]);
        setIncludingColor((oldArray) => [...oldArray, true]);
      } else {
        setCorrectColor((oldArray) => [...oldArray, false]);
        setIncludingColor((oldArray) => [...oldArray, false]);
      }
    }
    // Success
    if (ANSWER === userAnswer.slice(m, n).join("")) {
      Alert.alert("Success!");
    }
    // Fail
    else if (
      userAnswer[29] !== undefined &&
      ANSWER !== userAnswer.slice(25, 30).join("")
    ) {
      Alert.alert("Fail");
      console.log(userAnswer[29]);
    }
  };

  useEffect(() => {
    for (i = 0; i < 30; i++) {
      setIsBasicColor((oldArray) => [...oldArray, true]);
    }
  }, []);
  // first trial
  useEffect(() => {
    if (Words.includes(userAnswer.join(""))) {
      checkAnswer(0, 5);
      setData((oldArray) => [...oldArray, 5, 6, 7, 8, 9]);
    } else {
      setUserAnswer([]);
    }
  }, [userAnswer[4]]);

  // second trial
  useEffect(() => {
    if (Words.includes(userAnswer.slice(-5).join(""))) {
      checkAnswer(5, 10);
      setData((oldArray) => [...oldArray, 10, 11, 12, 13, 14]);
    } else {
      const newState = userAnswer;
      newState.splice(-5, 5);
      setUserAnswer(newState);
    }
  }, [userAnswer[9]]);

  // third trial
  useEffect(() => {
    if (Words.includes(userAnswer.slice(-5).join(""))) {
      checkAnswer(10, 15);
      setData((oldArray) => [...oldArray, 15, 16, 17, 18, 19]);
    } else {
      const newState = userAnswer;
      newState.splice(-5, 5);
      setUserAnswer(newState);
    }
  }, [userAnswer[14]]);

  // fourth trial
  useEffect(() => {
    if (Words.includes(userAnswer.slice(-5).join(""))) {
      checkAnswer(15, 20);
      setData((oldArray) => [...oldArray, 20, 21, 22, 23, 24]);
    } else {
      const newState = userAnswer;
      newState.splice(-5, 5);
      setUserAnswer(newState);
    }
  }, [userAnswer[19]]);

  // fifth trial
  useEffect(() => {
    if (Words.includes(userAnswer.slice(-5).join(""))) {
      checkAnswer(20, 25);
      setData((oldArray) => [...oldArray, 25, 26, 27, 28, 29]);
    } else {
      const newState = userAnswer;
      newState.splice(-5, 5);
      setUserAnswer(newState);
    }
  }, [userAnswer[24]]);

  // Last Trial
  useEffect(() => {
    if (Words.includes(userAnswer.slice(-5).join(""))) {
      checkAnswer(25, 30); // Fail 처리
    } else {
      const newState = userAnswer;
      newState.splice(-5, 5);
      setUserAnswer(newState);
    }
  }, [userAnswer[29]]);

  return (
    <Container>
      <Title>Game</Title>
      <FlatList
        data={data}
        numColumns={5}
        contentContainerStyle={{
          alignItems: "center",
        }}
        keyExtractor={(item) => item}
        renderItem={({ item }) => {
          return (
            <Input
              basicColor={isBasicColor[item]}
              value={userAnswer[item]}
              editable={false}
              correct={correctColor[item]}
              including={includingColor[item]}
              maxLength={1}
            />
          );
        }}
      />
      <FlatList
        data={Alphabet}
        keyExtractor={(item) => item}
        contentContainerStyle={{
          alignItems: "center",
        }}
        numColumns={7}
        renderItem={({ item }) => (
          <Typing
            onPress={() => setUserAnswer((oldArray) => [...oldArray, item])}
          >
            <TypingText>{item}</TypingText>
          </Typing>
        )}
      />
    </Container>
  );
};