In React and TypeScript, why is my returned <Series.Sequence /> erroring as type [object Object]?

Question

It's late and I'm likely missing something simple. In React with Remotion, I decided to extend the <Series.Sequence> component (doc link) for a set of narrated sequences, automatically setting the sequence duration based on the narration audio file time plus any time padding before and after the audio starts/finishes. For this, I created a new component, returning a <Series.Sequence> component. However, when used (see Composition.tsx below), I get an error:

The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got [object Object] instead

This is showing after compile in the web browser:

node_modules/remotion/dist/cjs/series/index.js:34

if (castedChild.type !== SeriesSequence) {
  throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got ${castedChild} instead`);
}

I'm thinking I need to cast the type here, yet I'm missing where this should occur at this late hour. What's the best way to proceed?

NarratedSeriesSequence.tsx (returning Series.Sequence):

import React, {useCallback, useEffect, useState} from 'react';
import {staticFile, Series, useVideoConfig} from 'remotion';
import {getAudioDurationInSeconds} from '@remotion/media-utils';

export interface NarratedSeriesSequenceProps {
    narrationAudioFile: string;
    children: JSX.Element;
    framePaddingBefore?: number;
    framePaddingAfter?: number;
}

/**
 * Time a sequence dynamically based on narration audio length. Add optional padding before
 * and after the narration begins. This gives more flexibility and time savings when needing
 * to make use of several narration-based sequences and when making revisions to
 * narration recordings.
 */
export const NarratedSeriesSequence: React.FC<NarratedSeriesSequenceProps> = ({
    narrationAudioFile,
    framePaddingBefore = 0,
    framePaddingAfter = 0,
    children,
}: NarratedSeriesSequenceProps) => {
    const {fps} = useVideoConfig();
    const [durationFrames, setDurationFrames] = useState(0);

    const getDurationFrames = useCallback(async () => {
        try {
            const duration = await getAudioDurationInSeconds(
                staticFile(narrationAudioFile)
            );
            const durationInFrames =
                duration * fps + framePaddingBefore + framePaddingAfter;
            setDurationFrames(durationInFrames);
        } catch (err) {
            console.log(err);
        }
    }, [narrationAudioFile, framePaddingBefore, framePaddingAfter, fps]);

    // Get narration audio frames
    useEffect(() => {
        getDurationFrames();
    }, [getDurationFrames]);

    if (durationFrames === 0) {
        return null;
    }

    return (
        <Series.Sequence durationInFrames={durationFrames}>
            {/* narration audio placed here soon */}
            {children}
        </Series.Sequence>
    );
};

Composition.tsx

import {AbsoluteFill, Series} from 'remotion';
import {Logo} from './Logo';
import {Subtitle} from './Subtitle';
import {Title} from './Title';
import {z} from 'zod';
import {zColor} from '@remotion/zod-types';
import {BackgroundAudio} from './BackgroundAudio';
import {NarratedSeriesSequence} from './NarratedSeriesSequence';

export const myCompSchema = z.object({
    titleText: z.string(),
    titleColor: zColor(),
    logoColor: zColor(),
});

export const MyComposition: React.FC<z.infer<typeof myCompSchema>> = ({
    titleText: propOne,
    titleColor: propTwo,
    logoColor: propThree,
}) => {
    return (
        <>
            <BackgroundAudio />
            <Series>
                {/* Series.Sequence: works fine if I remove NarratedSeriesSequence lines */}
                <Series.Sequence durationInFrames={220}>
                    <AbsoluteFill className="bg-gray-100 items-center justify-center">
                        <div className="m-10" />
                        <Logo logoColor={propThree} />
                        <div className="m-3" />
                        <Title titleText={propOne} titleColor={propTwo} />
                        <Subtitle />
                    </AbsoluteFill>
                </Series.Sequence>
                {/* NarratedSeriesSequence returns a Series.Sequence, yet I may not be defining this correctly? Thinks [object Object] */}
                <NarratedSeriesSequence narrationAudioFile="audio/narration/00-this-video-was.mp3">
                    <div>
                        This video was designed and rendered using React and Remotion.
                    </div>
                </NarratedSeriesSequence>
                {/* NarratedSeriesSequence returns a Series.Sequence, yet I may not be defining this correctly? */}
                <NarratedSeriesSequence narrationAudioFile="audio/narration/01-remotion-gives-web-developers.mp3">
                    <div>
                        Remotion gives web developers and designers a set of libraries to
                        bring familiar tools into video projects, allowing for innovative
                        creativity that traditional video production tools handle very
                        differently.
                    </div>
                </NarratedSeriesSequence>
            </Series>
        </>
    );
};

Answer 1

The library does a reference equality check for the Series.Sequence function with the children, so it fails. Here's a dirty workaround -

import { useMemo } from "react";
import {AbsoluteFill, Series} from 'remotion';
import {Logo} from './Logo';
import {Subtitle} from './Subtitle';
import {Title} from './Title';
import {z} from 'zod';
import {zColor} from '@remotion/zod-types';
import {BackgroundAudio} from './BackgroundAudio';
import {NarratedSeriesSequence} from './NarratedSeriesSequence';

export const myCompSchema = z.object({
    titleText: z.string(),
    titleColor: zColor(),
    logoColor: zColor(),
});

export const MyComposition: React.FC<z.infer<typeof myCompSchema>> = ({
    titleText: propOne,
    titleColor: propTwo,
    logoColor: propThree,
}) => {

const NarrationSequence1 = useMemo(() => ({...(<NarratedSeriesSequence narrationAudioFile="audio/narration/00-this-video-was.mp3">
                    <div>
                        This video was designed and rendered using React and Remotion.
                    </div>
                </NarratedSeriesSequence>), type: Series.Sequence }), []);

const NarrationSequence2 = useMemo(() => ({...(<NarratedSeriesSequence narrationAudioFile="audio/narration/01-remotion-gives-web-developers.mp3">
                    <div>
                        Remotion gives web developers and designers a set of libraries to
                        bring familiar tools into video projects, allowing for innovative
                        creativity that traditional video production tools handle very
                        differently.
                    </div>
                </NarratedSeriesSequence>), type: Series.Sequence}),[]);

    return (
        <>
            <BackgroundAudio />
            <Series>
                {/* Series.Sequence: works fine if I remove NarratedSeriesSequence lines */}
                <Series.Sequence durationInFrames={220}>
                    <AbsoluteFill className="bg-gray-100 items-center justify-center">
                        <div className="m-10" />
                        <Logo logoColor={propThree} />
                        <div className="m-3" />
                        <Title titleText={propOne} titleColor={propTwo} />
                        <Subtitle />
                    </AbsoluteFill>
                </Series.Sequence>
                {/* NarratedSeriesSequence returns a Series.Sequence, yet I may not be defining this correctly? Thinks [object Object] */}
                {NarrationSequence1}
                {/* NarratedSeriesSequence returns a Series.Sequence, yet I may not be defining this correctly? */}
                {NarrationSequence2}
            </Series>
        </>
    );
};

Answer 2

Due to the very strict nature and validation of <Series.Squence />, I found the best value by recomposing and getting narration timings at the composition level where the those components were being used.

I'll leave this unanswered for a while in case a better solution is presented.

Composition.tsx

import {Audio, Sequence} from 'remotion';
import {
    AbsoluteFill,
    Series,
    staticFile,
    useVideoConfig,
    Video,
} from 'remotion';
import {Logo} from './Logo';
import {Subtitle} from './Subtitle';
import {Title} from './Title';
import {z} from 'zod';
import {zColor} from '@remotion/zod-types';
import {BackgroundAudio} from './BackgroundAudio';
import {useEffect, useState} from 'react';
import {getAudioDurationInSeconds} from '@remotion/media-utils';

export const myCompSchema = z.object({
    titleText: z.string(),
    titleColor: zColor(),
    logoColor: zColor(),
});

export interface NarrationFrames {
    [key: string]: number;
}

export const MyComposition: React.FC<z.infer<typeof myCompSchema>> = ({
    titleText: propOne,
    titleColor: propTwo,
    logoColor: propThree,
}) => {
    const {fps} = useVideoConfig();
    const [narrationFrames, setNarrationFrames] = useState<NarrationFrames>({});

    const narrationFramePadding = 20;

    useEffect(() => {
        const getFrames = async (file: string) => {
            const seconds = await getAudioDurationInSeconds(staticFile(file));
            return seconds * fps;
        };

        const getNarrationFrames = async () => {
            const frames: NarrationFrames = {
                '00-this-video-was': await getFrames(
                    'audio/narration/00-this-video-was.mp3'
                ),
                '01-remotion-gives-web-developers': await getFrames(
                    'audio/narration/01-remotion-gives-web-developers.mp3'
                ),
            };

            setNarrationFrames(frames);
        };

        getNarrationFrames();
    }, [fps]);

    return (
        <>
            <BackgroundAudio />
            <Series>
                <Series.Sequence durationInFrames={220}>
                    <AbsoluteFill className="bg-gray-100 items-center justify-center">
                        <div className="m-10" />
                        <Logo logoColor={propThree} />
                        <div className="m-3" />
                        <Title titleText={propOne} titleColor={propTwo} />
                        <Subtitle />
                    </AbsoluteFill>
                </Series.Sequence>

                {narrationFrames['00-this-video-was'] && (
                    <Series.Sequence
                        durationInFrames={
                            narrationFrames['00-this-video-was'] + narrationFramePadding * 2
                        }
                    >
                        <Sequence from={narrationFramePadding}>
                            <Audio
                                src={staticFile('audio/narration/00-this-video-was.mp3')}
                            />
                        </Sequence>
                        <AbsoluteFill className="bg-black text-white text-7xl p-24">
                            This video was designed and rendered using React and Remotion.
                        </AbsoluteFill>
                    </Series.Sequence>
                )}

                <Series.Sequence durationInFrames={240}>
                    <AbsoluteFill>
                        <Video src={staticFile('video/why-use-react.mp4')} />
                    </AbsoluteFill>
                </Series.Sequence>

                {narrationFrames['01-remotion-gives-web-developers'] && (
                    <Series.Sequence
                        durationInFrames={
                            narrationFrames['01-remotion-gives-web-developers'] +
                            narrationFramePadding * 2
                        }
                    >
                        <Sequence from={narrationFramePadding}>
                            <Audio
                                src={staticFile(
                                    'audio/narration/01-remotion-gives-web-developers.mp3'
                                )}
                            />
                        </Sequence>
                        <AbsoluteFill className="bg-black text-white text-7xl p-24">
                            Remotion gives web developers and designers a set of libraries to
                            bring familiar tools into video projects, allowing for innovative
                            creativity that traditional video production tools handle very
                            differently.
                        </AbsoluteFill>
                    </Series.Sequence>
                )}
            </Series>
        </>
    );
};