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}
            >
              <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