Iterating over a styled component in REACT produces warning “Over 200 classes were generated for component”

I’m new to React and am trying to animate some elements from an array using the ReShake.js library. Here’s my code:

import { ShakeHorizontal } from 'reshake'
const state = {
    invalidWordSubmitted: true,
}
const isInvalidWordSubmitted = () => {
  return state.invalidWordSubmitted ? '.invalidWordSubmitted' : ''

}

// here is the bit that I think is causing the problem:

           <div id="gameBoard" className="gameBoard">         
        {board.map((row, rowNumber) =>
          row.map((letter, colNumber) => (
            <span
              key={colNumber}
              className={`${getCellStyles(
                rowNumber,
                colNumber,
                letter
              )} letterTile`}
            >
              <ShakeHorizontal trigger={`${isInvalidWordSubmitted()}`}>
              {letter}
              </ShakeHorizontal>
            </span>
          ))
        )}
      </div>

It works ok, but there is serious lag in the browser, and the console shows me the following warning: react_devtools_backend.js:4045 Over 200 classes were generated for component styled.div with the id of "sc-bdvvtL"

Should I be adding unique ids to each of the iterated <ShakeHorizontal> components?
I couldn’t find anything in the docs: https://github.com/elrumordelaluz/reshake/tree/master/src