React useEffect周りでエラーが発生 Cannot read properties of undefined

バックエンドをrails,フロントをReactで開発を行っています。

実現したいこと

apiで取得したデータをレンダリングできるようにしたい。

apiで取得したデータを同じコンポーネント枠内では初期表示できないために　
Cannot read properties of undefined　＊＊＊（プロパティ名）とエラーが出てしまうのは理解できたのですが、解決方法が理解できません。

コンポーネント分割してpropsとしてデータを渡してみましたが、
改善することはできませんでした。

発生している問題・エラーメッセージ

何度かバックエンド側からデータを取得しようとしているのですが、
きちんとデータを受け取る前にエラーになってしまっているようです。

https://techacademy.jp/magazine/26836
https://teratail.com/questions/351930
https://zenn.dev/kantafukazawa/articles/742ae144c2f43e

React
1export const getEnglishlist = () => {
2  return client.get("englishlists")
3  .then(res => {
4    return res.data
5  })
6  .catch((e) => console.error(e))
7}

const Wordcard = (props) => {
  const { wtype, len } = props

  const [isFlipped, setIsFlipped] = useState(false);
  const [state, dispatch] = useReducer(wordsReducer, initialState);
  const [targetWord, setTargetWord] = useState()
  const [words, setWords] = useState([])
  const [currentIndex, setCurrentIndex] = useState(len)
  const [lastDirection, setLastDirection] = useState()
  const [show, setShow] = useState(false)
  const currentIndexRef = useRef(currentIndex)
  let count = 0


  console.log(currentIndex)
  useEffect(() => {
    dispatch({type:wordsActionTypes.FETCHING})
    getEnglishlist()
    .then((data) =>
      dispatch({
        type:wordsActionTypes.FETCH_SUCCESS,
        payload: {
          wordtype:data.wordlist.filter(type => {
            return (
              type.wordtype === wtype)
          })
        }
      }),setTargetWord(state.wordlist)
    )
  },[])



  console.log(targetWord)
  console.log(state.wordlist)

  const flipCard = () => {
    setIsFlipped(!isFlipped);
  }

  const nextword = (count) => {
    setTargetWord(count + 1)

  }

  return (
    <>
      <h2>{wtype}ページ</h2>
      <Link to="/list">・Listページに戻る</Link>

        <SwipeCard words={state.wordlist} />


    </>
  )
}

const SwipeCard = (props) => {
  const {words} = props
  let count = 0

  const [isFlipped, setIsFlipped] = useState(false);
  const [targetWord, setTargetWord] = useState(words)

  const flipCard = () => {
    setIsFlipped(!isFlipped);
  }

  useEffect(() => {
    setTargetWord(words)
  }, [targetWord])
  console.log(targetWord)

  return (
    <>
      { targetWord ?
        <div className="card">
          <ReactCardFlip isFlipped={isFlipped}  flipSpeedFrontToBack={1.0}
            flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">
            <div className="front" onClick={flipCard}>
              <ul>
                <li>
                  {targetWord[count].word}
                </li>
              </ul>
              <p>Click Here!!!</p>
            </div>
            <div className="back" onClick={flipCard}>
              <ul>
                <li>
                  <p>意味</p>
                  {targetWord[count].commentary}
                </li>
                <li>
                  <p>例文</p>
                  {targetWord[count].example}
                </li>
                <li>
                  <p>例文訳</p>
                  {targetWord[count].exampleMeaning}
                </li>
              </ul>
            </div>
          </ReactCardFlip>
        </div> : <p>Now Loading!</p>}
    </>
    )
}