css transition fails on Chrome

[aquaductape]

Here's the codesandbox demo
This issue happens in Chrome.

Here's the structure. In my index file under pages directory, the parent renders MainProgressBar, and either Primary or Secondary based on whether the progress is finished or not.

export default function Home() {
  const [list] = useState([{ id: 5 }, { id: 10 }, { id: 20 }]);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [isFinished, setIsFinished] = useState(false);

  const onNext = () => {
    if (isFinished) return;

    if (currentIdx === list.length - 1) {
      setIsFinished(true);
    }
    setCurrentIdx((prev) => prev + 1);
  };
  return (
    <div className="App">
      <MainProgressBar
        total={list.length}
        currentIdx={currentIdx}
      ></MainProgressBar>
      {!isFinished ? (
        <Primary onNext={onNext}></Primary>
      ) : (
        <Secondary></Secondary>
      )}
    </div>
  );
}

I have button that is belongs to Primary. When that button is clicked the current index of a generic list is increased by one. The length of the ProgressBar is based on current index divided by the length of the list.

For example currentIdx -> 3 list.length -> 4 would basically be 3 / 4 which the ProgressBar length will be 75%.

When the ProgressBar increases, there's a 1300ms transition based on a css transition property. Once the currentIdx matches the length, then isFinished state is updated, which results in Secondary to render instead of Primary, and that's when the transition fails. The ProgressBar reaches the remaining 100% length immediately with no transition.

One workaround is placing the button as a direct child in the parent component, then transition works even when isFinished is updated.

  return (
    <div className="App">
      <MainProgressBar
        total={list.length}
        currentIdx={currentIdx}
      ></MainProgressBar>
      {!isFinished ? (
        <Primary></Primary>
      ) : (
        <Secondary></Secondary>
      )}
      <button onClick={onNext}>Next</button>
    </div>
  );

But I would rather not do that, since on my main project, it's structured that way.

Here's the codesandbox demo

[aquaductape]

Ok, I solved it. I needed to wrap the condition that returns a component inside an element. In this snippit I used a div.

return (
  <div className="App">
    <MainProgressBar
      total={list.length}
      currentIdx={currentIdx}
    ></MainProgressBar>

    <div>
      {!isFinished ? (
        <Primary onNext={onNext}></Primary>
      ) : (
        <Secondary></Secondary>
      )}
    </div>
  </div>
);

However I don't understand why that solves the transition problem. I know it's a NextJS issue because I placed the same code in Create React App framework, and transition didn't have any issues.