Automatic Data Refetch Not Occurring on Component Remount or ParentId Change RTK query

Question

I'm encountering an issue with the refetchOnMountOrArgChange behavior when using the useGetContentsByParentIdMutation hook from @reduxjs/toolkit/query. My goal is to utilize this feature to automatically refetch content data based on a changing parentId when the component remounts.

Here's how I'm using the hook:

const [getContentsByParentId, { isLoading, isSuccess, data }] =
  useGetContentsByParentIdMutation(
    { parentId },
    {
      refetchOnMountOrArgChange: true,
    }
  );

However, despite my efforts, the automatic refetch doesn't seem to work as expected. I've ensured that the parentId value is correctly changing and that the component is being remounted, yet the data isn't being updated.

One peculiar aspect is that when I have the browser's network tab open, the automatic refetch works perfectly as I expected, and the updated data is populated correctly. But, without the network tab open, the fetched data remains empty after the refetch.

look at the implementation this might help you ->

const ContentChildren = () => {
  const { parentId } = useParams()
  const dispatch = useDispatch()
  const { contents } = useSelector((state) => state.contents)

  const [getContentsByParentId, { isLoading, isSuccess, data }] =
    useGetContentsByParentIdMutation(
      { parentId },
      {
        refetchOnMountOrArgChange: true,
      }
    ) // look at this code

  const [hasMore, setHasMore] = useState(true)
  const [pageNumber, setPageNumber] = useState(0)

  const observer = useRef()

  const lastElementRef = useCallback(
    (node) => {
      if (isLoading) return
      if (observer.current) observer.current.disconnect()
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPageNumber((prevNum) => prevNum + 1)
        }
      })
      if (node) observer.current.observe(node)
    },
    [isLoading, hasMore]
  )

  useEffect(() => {
    getContentsByParentId({
      parentId: parentId,
      body: { itemsPerPage: 12, pageNumber: pageNumber },
    })
  }, [pageNumber, parentId])

  useEffect(() => {
    if (isSuccess) {
      if (!data.data[0].children.length) {
        setHasMore(false)
      }
      const oldContents = contents // take copy of old sub contents
      dispatch(
        loadMoreContents({
          oldContents,
          newContents: data.data[0],
        })
      )
    }
  }, [isSuccess])

  // clean up the redux store when component unmount
  useEffect(() => {
    return () => {
      dispatch(resetContents())
    }
  }, [dispatch, parentId])

  return (
    <div className="container-fluid px-5">
      <div className="section-grid">

and here is the api implememtation

export const contentApi = createApi({
  reducerPath: 'contentApi',
  baseQuery: fetchBaseQuery({ baseUrl: BASE_URL }),
  endpoints: (builder) => ({
    getContentsByParentId: builder.mutation({
      query: (data) => {
        return {
          method: 'POST',
          url: `/${data.parentId}`,
          body: {
            ...data.body,
          },
          headers: {
            Authorization: getAccessToken(),
          },
        }
      },
    }),