In previous versions of scrollyteller we could apparently change panels props and then onMarker would fire the new data. In version 4 due to memoising or callbacking or something, only the original panel data is sent to the onMarker function.

Our Income Inequality piece uses this to send the user to a different part of the map depending on which LGA they are in.

Anyway I tried a number of different ways to make the panelReferences update when panels prop data changes, but without much luck.

One way to solve this (but this is kinda hacky) is to do something like this:

.map(({ element, measurements }, i, arr) => {
          const actualPanelData = panels[i].data;
          ...
          return {
            element,
            data: actualPanelData,
            ...
          };
        });

... which grabs the panel data from the actual panels prop.

This seems to update fine and fires off the data onMarker. There's gotta be a better way though.