Display Component Produced By Function, Replacing Previous Component On Screen

showButtons(1) displays the radio buttons for frame number 1, showButtons(400) displays the radio buttons for frame number 400.

This current code displays all radio buttons for each frame up to 400BUT I want one set of radio buttons displayed starting at frame 1 and to progressively change until reached frame number 400 replacing the previous radio buttons on the screen each time.

I can't seem to get it, any help is greatly appreciated.

import React from "react";

const Test = (props)=> {

  const keys = props.test.map(frame => Object.keys(frame));
  const filteredKeys = keys.map(frame =>
    frame.filter(key => new RegExp(/^roi\d+$/).test(key))
  );
  if (filteredKeys.length === 0) return null;
  const showButtons = (frameNumber) => {
  return filteredKeys[frameNumber].map((roi, index) =>  (
      <div>
        <label for={`roi${frameNumber}`}>{`roi${index}`}</label>
        <input type="radio" id={`roi${frameNumber}`} />
       </div>
    ));
  };


    var answers = []
    for (var i = 1; i < 400; i++){
      answers.push(showButtons(i))
    }


  return (
    <div className="Test">
      <div>
    {answers}    
      </div>
    </div>
  );
};
export default Test;

Output.json file im working with in form:

[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0},

Ok, try one last time based on your comments:

const data = [
  {
    roi0: [], //never use these values in your code
    roi1: [],
  },
  {
    roi0: [],
    roi1: [],
    roi2: [],
  },
];
const Test = props => {
  const [currentFrame, setCurrentFrame] = React.useState(0);
  const frames = React.useMemo(() => {
    const keys = props.test.map(frame =>
      Object.keys(frame)
    );
    return keys.map(frame =>
      frame.filter(key => new RegExp(/^roi\d+$/).test(key))
    );
  }, [props.test]);
  const playing = currentFrame < frames.length - 1;
  React.useEffect(() => {
    let timer;
    const up = () => {
      setCurrentFrame(frame => frame + 1);
      timer = playing && setTimeout(up, 1000);
    };
    timer = playing && setTimeout(up, 1000);
    return () => clearTimeout(timer);
  }, [playing]);
  return (
    <div>
      <div>
        <button onClick={() => setCurrentFrame(0)}>
          reset
        </button>
      </div>
      {currentFrame >= frames.length
        ? null
        : frames[currentFrame].map((roi, index) => (
            <div key={roi}>
              <label>
                {`roi${index}`}
                <input type="radio" />
              </label>
            </div>
          ))}
    </div>
  );
};

ReactDOM.render(
  <Test test={data} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>