single useQuery in multiple components

const useGetUserDetail = () => {
  const router  = useRouter()
  const id = router.query.id
    const [offset, setOffset] = useState(0)
    const {data} = useQuery({
      queryKey: ['useGetUserDetail', id , offset],
      queryFn: () => axios.get(`/api/users/${id }?offset=${offset}`)
    })
  
    return {data, setOffset}
}

// Component A
const ComponentA = () => {
  const {setOffset, data}  =useGetUserDetail()
  return (
  <>
  <button onClick={() => setOffset(prev => prev + 1)}>click</button>
  {JSON.stringigy(data)}
  </>
  )
}

// Component B
const ComponentB = () => {
  const {data}  =useGetUserDetail()
  return (
  <>
  {JSON.stringigy(data)}
  </>
  )
}