call again a api when id is passed in react js

i have this callback funtion inside useeffect i want to pass differnt props.id from parent js to this file so i get differnt datas the problem is const res = await axios.get("messages/get-all-messages/?receiver=" + props.id, config ); does not get recalled when i pass a new props.id from parent.js how can i call again this api when i pass a new props.id

  const getData = useCallback(async () => {
    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };
    const res = await axios.get(
      "messages/get-all-messages/?receiver=" + props.id,
      config
    );
undefined which will crash.
    if (res.status === 200) {
      if (mountedRef.current) {
      
        setdata(res.data.);
        
      }
    }
  }, []);

useEffect(() => {
    if (mountedRef.current) {
      getData();
    }
    return function cleanup() {
      mountedRef.current = false;
    };
  }, [getData]);