можно ли в redux хранить массив JSX элементов?

компонент ImgCreator рисуется в компоненте tab которых 6 штук и при переключении компонент удаляется(логика библиотеки)... если из одного таба переключения на второй а потом вернутся обратно на первый компонент снова создается а внутри есть массив который заново перебирается и рисуется(но данные в массиве те же)... так вот чтобы избежать перебора массива я решил сохранить этот массив(jsx элементов) в redux да и все работает НО правильно ли так делать?

import React from 'react'
import { useDispatch } from 'react-redux'
import { tabsActions } from '../../redux/tabs/tabsActions'
import { useSelector } from '../overrideHooks'
import styles from './ImgCreator.module.scss'

interface IImgProps {
  imgArr: Array<string>
  id: string
}

const getData = (data: Array<string>) => {
  let arr = data.map((e, i, arr) => {
    let elemSrc = arr[Math.floor(Math.random() * arr.length)]
    return (
      <div className={styles.innerContainer} key={e}>
        <img className={styles.img} src={elemSrc} alt={elemSrc} />
      </div>
    )
  })
  return arr
}

export const ImgCreator: React.FC<IImgProps> = ({ id, imgArr }) => {
  const dispatch = useDispatch()
  let arr = useSelector(state => state.tabs.data[id])
  if(!arr){
    arr = getData(imgArr)
    dispatch(tabsActions.add({[id]:arr}))
  }
  return <div className={styles.root}>{arr}</div>
}