Freeze portions of a sequence

With the following snippet, two portions of a sequence are frozen and resumed afterwards from the point they were paused.
tsx
import React, {useMemo} from'react';
import {Freeze, Sequence, useCurrentFrame} from'remotion';
exportconstCounter:React.FC= () => {
return (
 <divclassName="flex h-full justify-center items-center text-6xl">
 {useCurrentFrame()}
 </div>
 );
};
constFREEZES= [
 {
 frame: 0,
 durationInFrames: 25,
 },
 {
 frame: 30,
 durationInFrames: 50,
 },
];
constgetFreezes= () => {
let summedUpFreezes =0;
constfreezeFrames= [];
for (constfreezeofFREEZES) {
 freezeFrames.push({
 start: summedUpFreezes + freeze.frame,
 durationInFrames: freeze.durationInFrames,
 from: summedUpFreezes,
 frame: freeze.frame,
 });
 summedUpFreezes += freeze.durationInFrames;
 }
return freezeFrames;
};
exportconstFreezePortion:React.FC= () => {
constfreezes=useMemo(() => {
returngetFreezes();
 }, []);
constframe=useCurrentFrame();
constnextFreeze= freezes.find(
 (freeze) => frame < freeze.start + freeze.durationInFrames,
 );
constactiveFreeze= freezes.find(
 (freeze) =>
 frame >= freeze.start && frame < freeze.start + freeze.durationInFrames,
 );
constfrom=useMemo(() => {
if (activeFreeze) {
return0;
 }
if (nextFreeze) {
return nextFreeze.from;
 }
return (
 freezes[freezes.length-1].from +
 freezes[freezes.length-1].durationInFrames
 );
 }, [activeFreeze, freezes, nextFreeze]);
return (
 <Freeze
frame={activeFreeze ? activeFreeze.frame :0}
active={Boolean(activeFreeze)}
>
 <Sequencelayout="none"from={from}>
 <Counter />
 </Sequence>
 </Freeze>
 );
};