BUG: Setting `indicators={true}` on scene causing error

[tonywei92]

Error message:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'firstChild')

Call Stack
Object._indicators.updateBoundsPositions
node_modules/react-scrollmagic/dist/index.es.js (3139:0)
eval
node_modules/react-scrollmagic/dist/index.es.js (3285:0)

Here is the code:

<div>
        <Controller>
          <Scene duration={"100%"} indicators={true}>
            <div className="h-screen bg-yellow-500">Sticky Example 2</div>
          </Scene>
          <Scene duration={"100%"} indicators={true}>
            <div className="h-screen bg-green-500">Sticky Example 1</div>
          </Scene>
        </Controller>
      </div>

dependencies:

  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-scrollmagic": "^2.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.16.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24"
  }

node version: v16.15.0 MacOS version: 12.4 (21F79) Intel

Screenshot of the error: