Using React.Fragment (empty tags) causes Runtime Error. Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.

[Juno-T]

Basically, this works:

<Scrollama>
    <Step data={1}>
      <div style={{ height: "400px" }}>1</div>
    </Step>
    <Step data={2}>
      <div style={{ height: "400px" }}>2</div>
    </Step>
</Scrollama>

But this throws runtime error:

<Scrollama>
  <>
    <Step data={1}>
      <div style={{ height: "400px" }}>1</div>
    </Step>
    <Step data={2}>
      <div style={{ height: "400px" }}>2</div>
    </Step>
  </>
</Scrollama>

Full Error:

Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.
    at new e.IntersectionObserver (chrome-extension://ekhagklcjbdpajgpjgmbionohlpdbjgc/lib/SingleFile/single-file-hooks-frames.js:1:8206)
    at createObserver (http://localhost:3000/static/js/bundle.js:41452:22)
    at observe (http://localhost:3000/static/js/bundle.js:41509:7)
    at http://localhost:3000/static/js/bundle.js:41587:27
    at http://localhost:3000/static/js/bundle.js:41683:5
    at commitAttachRef (http://localhost:3000/static/js/bundle.js:32135:24)
    at commitLayoutEffectOnFiber (http://localhost:3000/static/js/bundle.js:32016:13)
    at commitLayoutMountEffects_complete (http://localhost:3000/static/js/bundle.js:33015:13)
    at commitLayoutEffects_begin (http://localhost:3000/static/js/bundle.js:33004:11)
    at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:32950:7)

This makes it a bit tricky to do array mappings, e.g.

<Scrollama>
  {[1, 2].map((i) => (
    <>
      <Step data={{ step: i, part: 1 }}>
        <div style={{ height: "400px" }}>part1</div>
      </Step>
      <Step data={{ step: i, part: 2 }}>
        <div style={{ height: "200px" }}>part2</div>
      </Step>
    </>
  ))}
</Scrollama>

A work around is to generate a rolled out array first, and then map each element to a single Step element.