How to pass value stored in state 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>

But I want to pass this inState to another screen and display everything stored in inState.

For This I tried the following:

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

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

const ChartScreen = (props: any) => {    const {inState} = props.route.params;    return (<View style={styles.screen}>            {inState}</View>    );};

But on the second I am getting error TypeError: cyclical structure in JSON object, js engine: hermes.

I don't know what I am doing wrong, please help