Why is AudioBufferSourceNode not consistent

Question

I am rendering a music visualizer in multiple chunks and am having a hard time getting one chunk to transition into the next one gracefully.

I am looking for a way to get frequency data based on a specific time or frame and have it return the same buffer deterministically.

const render = () => {
  return new Promise((resolve, reject) => {
    try {
      if (audioCtxRef.current) {
        const bufferSource: AudioBufferSourceNode = audioCtxRef.current.createBufferSource();
        bufferSource.buffer = sourceRef.current.buffer;
        bufferSource.connect(analyzerRef.current);

        bufferSource.onended = () => {
          analyzerRef.current.getByteFrequencyData(fftRef.current);
          analyzerRef.current.getFloatTimeDomainData(tdRef.current);

          // See screenshots for this log, you will notice they are never the same values
          console.log({
            frameData: fftRef.current
          });

          logger({
            frame,
            frameData: fftRef.current
          });

          // put on UI
          drawCanvas(
            {
              fft: fftRef.current
            },
            canvasRef.current,
            background,
            type
          );

          // finished
          bufferSource.disconnect();
          resolve("");
        };

        bufferSource.start(0, Number((frame / 60).toFixed(2)), 1);
      } else {
        reject("AudioCtx is missing");
        onReady("visualizer");
      }
    } catch (e) {
      reject(e);
      onReady("visualizer");
    }
  });
};

This is the analyzer data from the bufferSource

This is a new result of the same analyzer data from the bufferSource with different values even though the time is the same