A non-serializable value was detected in the state using redux toolkit and JSON data

I am trying to return some data from my db and then insert it into my front end state with redux toolkit, it was working fine for some dummy data structured as an array of objects.

Now I am getting the data from my db via an api it is not working. I am getting this error message:

A non-serializable value was detected in the state, in the path: `word.preppedWord.0.$$typeof`. Value: Symbol(react.element) 
Take a look at the reducer(s) handling this action type: word/checkMorphemes.

Is it because I am returning my database data with res.json? I am unsure of the proper way to return the data if so.

Here is my code:

const wordSlice = createSlice({
  name: 'word',
  initialState: { word: '', preppedWord: '' },
  reducers: {
    setWord(state, action) {
      state.word = action.payload
    },
    checkMorphemes(state, action) {
      state.preppedWord = decoder.morphemeCheck2(state.word)
    },
   [...]
})

export const morphemeCheck2 = (word) => {
  console.log(word)
  return word.split(' ').map((word, i) => {
    console.log(word)
    return (
      <span key={i}>
        <span>{prefixCheck(word)}</span>
        <span>{baseWord(word)}</span>
        <span>{suffixCheck(word)}</span>
      </span>
    )
  })
}

const prefixCheck = (x) => {
  api.getPrefixes().then((data) => {
    let prefixes = data
    for (let p = 0; p < prefixes.length; p++) {
      let prefix = prefixes[p].affix_name
      if (x.startsWith(prefix)) {
        return (
          <span className={'suffix ' + prefix} onMouseOver={() => {}}>
            {prefix}
          </span>
        )
      }
    }
  })
}

Here is the api route:

router.get('/prefixes', (req, res) => {
  db.getPrefixes()
    .then((result) => {
      res.json(result)
    })
    .catch((err) => {
      console.error(`There is an error here: ${err.message}`)
    })
})