How to save json data from one screen to second based on user input (react -native) expo

I am using react-native and expo. When I click on first screen (there are some json data) such as:

AAcompanyBBcompany

When user clicks on A it send them to second screen and it shows the A symbol there, but when I go back to first screen the first A symbol get disappeared and only the other symbol display such as if I click on B this time so only B is there but A has disappeared.

My code: First class:

import React, { useState, useEffect } from "react";import {  StyleSheet,  View,  TouchableWithoutFeedback,  Keyboard,  FlatList,  TextInput,  Button,  Text,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";import { Ionicons } from "@expo/vector-icons";import { ListItem } from "react-native";export default function SearchScreen({ navigation }) {  const { ServerURL, addToWatchlist } = useStocksContext();  const [state, setState] = useState({    /*  initial state here */    myListData: [],  });  const [search, setSearch] = useState("");  useEffect(() => {    renderWithData();    // FixMe: fetch symbol names from the servner and save in local SearchScreen state  }, []);  const updateSearch = (text) => {    setSearch(text);  };  renderWithData = () => {    return fetch("http://131.181.190.87:3001/all")      .then((res) => res.json())      .then((json) => {        setState({          isLoaded: true,          myListData: json,        });        setTimeout(() => {          //console.log(state.myListData);        }, 10000);      });  };  let filteredItems = state.myListData.filter((item) => {    return (      item.symbol.toUpperCase().indexOf(search.toUpperCase()) !== -1 ||      item.name.indexOf(search) !== -1    );  });  let movies = filteredItems.map((val) => {    return (<View key={val.symbol} style={styles.text}><Text          style={styles.text}          onPress={() => navigation.navigate("Stock", { stuff: val.symbol })}>          {val.symbol}</Text><Text style={styles.text}>{val.name}</Text></View>    );  });  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><TextInput          style={styles.textinput}          placeholder="Search here"          placeholderTextColor="white"          value={search}          onChangeText={(text) => updateSearch(text)}        /><Text>csdn</Text><View style={styles.text}>{movies}</View></View></TouchableWithoutFeedback>  );}const styles = StyleSheet.create({  textinput: {    color: "white",    height: "20",    fontSize: 18,  },  text: {    color: "white",    backgroundColor: "black",  },  flatstuff: {    color: "white",  },  // use scaleSize(x) to adjust sizes for small/large screens});

Second class:

import React, { useState, useEffect } from "react";import {  TouchableWithoutFeedback,  Keyboard,  FlatList,  TextInput,  Button,  Text,} from "react-native";import {  StyleSheet,  View /* include other react-native components here as needed */,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";// FixMe: implement other components and functions used in StocksScreen here (don't just put all the JSX in StocksScreen below)export default function StocksScreen({ route }) {  const { ServerURL, watchList } = useStocksContext();  const [state, setState] = useState({    myListData: [],    /* FixMe: initial state here */  });  const { stuff } = route.params;  renderWithData = () => {    return fetch(`http://131.181.190.87:3001/history?symbol=${stuff}`)      .then((res) => res.json())      .then((json) => {        setState({          isLoaded: true,          myListData: json,        });      // console.log(state.myListData[0]);      });  };  // can put more code here  useEffect(() => {    renderWithData();    // FixMe: fetch stock data from the server for any new symbols added to the watchlist and save in local StocksScreen state  }, [watchList]);  //let item = state.myListData[0];  let item = state.myListData.length && state.myListData[0]; let movie = (<View  style={styles.text}><Text style={styles.text} key={item.symbol}>      {item.high}</Text><Text style={styles.text} key={item.symbol}>      {item.close}</Text></View>)  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><Text style={styles.text}>bb</Text><View>{movie}</View></View></TouchableWithoutFeedback>   );}const styles = StyleSheet.create({  text: {    color: "black",    backgroundColor: "white",  },});

that is the second screen code above. How can I save my symbol name?

I already have this class how do I store the data here and connect to other classes:

import React, { useState, useContext, useEffect } from "react";import { AsyncStorage } from "react-native";const StocksContext = React.createContext();export const StocksProvider = ({ children }) => {  const [state, setState] = useState([]);  return (<StocksContext.Provider value={[state, setState]}>      {children}</StocksContext.Provider>  );};export const useStocksContext = () => {  const [state, setState] = useContext(StocksContext);  // can put more code here  function addToWatchlist(newSymbol) {    //FixMe: add the new symbol to the watchlist, save it in useStockContext state and persist to AsyncStorage  }  useEffect(() => {    // FixMe: Retrieve watchlist from persistent storage  }, []);  return { ServerURL: 'http://131.181.190.87:3001', watchList: state,  addToWatchlist };};

Json data:

 Object {   "close": 63.37,   "high": 67.5599,   "industry": "Health Care",   "low": 62.09,   "name": "Agilent Technologies Inc",   "open": 66.8,   "symbol": "A",   "timestamp": "2020-03-23T14:00:00.000Z",   "volumes": 2989560, } Object {   "close": 63.37,   "high": 67.5599,   "industry": "Health Care",   "low": 62.09,   "name": "Agilent Technologies Inc",   "open": 66.8,   "symbol": "A",   "timestamp": "2020-03-23T14:00:00.000Z",   "volumes": 2989560, }