I am trying to implement this navigation pattern when you click a button then it takes you to a new set of screens then comes back right at the start, something like this:

parentScreen => child 1 => child 2 => parentScreen(again).

However, I am having trouble storing route params coming from "child 2" in "parentScreen" using react native navigation route object

here is the code of the parentScreen:

  useEffect(() => {
    axios
      .get(`${baseUrl}/utilities/Entretien?id=1`)
      .then((response) => {
        setDataFromAPI(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])

  // storing route.params.params inside recap state 
  
  //route.params example: 
  /* Object {
  "merge": true,
  "name": "child 2",
  "params": Object {
    "id": 20,
    "name": "create",
    "parent": "wheel",
  },
} */
  useEffect(() => {
    console.log('this is route: ', route.params)
    const newRecap = route.params?.params
    if (route.params?.params !== undefined)
      setRecap((prev) => [...prev, newRecap])
    console.log('recap', recap)
  }, [route.params])

this is how a pass the params to parent screen

let { id, baseUrl, parent } = route.params
  const [selectedId, setSelectedId] = React.useState(null)
  const [dataFromAPI, setDataFromAPI] = React.useState([])
  React.useEffect(() => {
    axios
      .get(`${baseUrl}/utilities/Entretien?id=${id}`)
      .then((response) => {
        setDataFromAPI(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])
const renderItem = ({ item }) => {
    return (
      <Item
        item={item}
        onPress={() => {
          navigation.navigate({
            name: 'Entretien',
            params: {
              id: item.id,
              name: item.value,
              parent,
            },
            merge: true,
          })
        }}
      />
    )
  }
  return (
    <View>
      <FlatList
        data={dataFromAPI}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />
    </View>
  )

the problem is when I log the recap state I get an empty array even after navigating through the child screens, it is until I re-render (save the file once again) that the recap state matches the route.params, and if I re-render again, the recap array will contain two of route.params object.

Any ideas on how I can fix this ? Thank you (for any explanation please leave a comment 😁) (react 17.0.2, react-navigation 6, expo 45, react-native 0.68.2)