how to display a state which is passed as an object to another screen in react native

So I have created a state like :

const [inState, setInState] = useState([<View />]);

Then on click of some buttons, I am updating inState

const breakOutClick = () => {    setInState([        ...inState,<><StatusBoxComponent                ImageConfigIconCheckOut={true}                status={'Break-Out'}                time={time}            /></>,    ]);};const breakInClick = () => {    setInState([        ...inState,<><StatusBoxComponent                ImageConfigIconCheckOut={true}                status={'Break-In'}                time={time}            /></>,    ]);};

I am able to display everything stored in inState, on this same screen in this manner:

<View>    {inState}</View>

I am passing this inState to another screen in the following manner:

props.navigation.navigate(ChartScreen, {            inState: Object.assign({}, inState),        });

Then on this second screen, i.e, ChartSCreen, I did the following:

const ChartScreen = (props: any) => {    const {inState} = props.route.params;    useEffect(() => {    console.log('>>>>>>>>>', inState);}, []);    return (<View>            {inState}    // getting error here</View>    );};

I have console the inState, which looks like this:

{"0": <ForwardRef />, "1": <React.Fragment><StatusBoxComponent                 ImageConfigIconCheckOut={true}                 status="Break-In"                 time="17:51:40"             /></React.Fragment>, "2": <React.Fragment><StatusBoxComponent                 ImageConfigIconCheckOut={true}                 status="Break-Out"                 time="17:51:42"             /></React.Fragment>}

How can I display the multiple StatusBoxComponent on my second screen?