why passing params do not refresh and have to refresh the new page update

Question

i am trying to pass params to next page by calling id from previous page. but when you enter the next page the data does not appear immediately and you have to refresh the page which takes quite a long time, and faithfully calling new data, what appears is the previous data, you have to refresh the page to bring up new data. what is the solution?

first page code

...//
         onPress={() => {
              setId(item.ID);
              navigation.navigate('Rekap_Bencana', {
                params: id
                });
            }}
...//
    const [dataBencana, setDataBencana] = useState();
      const [id, setId] = useState();
      useEffect(() => {
        getData();
      }, []);
      const getData = () => {
        fetch('http://192.168.0.103/aplikasi/restapi.php?op=getDatabencana')
          .then(response => response.json())
          .then(json => {
            // console.log(json);
            setDataBencana(json);
            // console.log(dataBencana);
          });
      };
    

params page code

  const Rekap_Bencana = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const {params} = route.params;

  useEffect(() => {
    getData();
    console.log(params);
    }, []);

  const [data, setData] = useState();
  const getData = () => {
    fetch('http://192.168.0.103/aplikasi/restapi.php?op=getBencanaDetail', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: params,
      }),
    })
      .then(res => res.json())
      .then(resp => {
        setData(resp);
        console.log(resp);
      });
  };