Reactjs 如何在props 更改时运行自定义挂钩

我创建了一个定制钩子，它接受一个URL并返回数据

import { useEffect, useState } from "react";

export function useHttp({ url }: { url: string }) {
  const [data, setData] = useState<any>(null);

 useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
    fetch(url, { signal })
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => {
        if (err.name === "AbortError") {
          console.log("successfully aborted");
        } else {
          // handle error
        }
      });

    return () => {
      // cancel the request before component unmounts
      controller.abort();
    };
  }, []);

  return data ;
}

我正在使用钩子在我的主页中获取数据，这很好用

import { useState } from "react";
import { useHttp } from "./useHttp";
import "./App.css";

type person = { name: string; id: number };
function App() {
  const [selectedId, setSelectedId] = useState<number>(1);
  const people = useHttp({ url: "https://jsonplaceholder.typicode.com/users" });

  return (
    <div className="App">
      {(people as unknown as person[])?.map(({ id, name }) => (
        <button key={id} onClick={() => setSelectedId(id)}>
          {name}
        </button>
      ))}
      <br />
      <InnerComponent selectedId={selectedId} />
    </div>
  );
}

我陷入困境的部分是，我试图在子组件中再次重用挂钩，以获取有关依赖于主组件的一些值的详细信息

const InnerComponent = ({ selectedId }: { selectedId: number }) => {
  console.log(selectedId)
  const person = useHttp({
    url: `https://jsonplaceholder.typicode.com/users/${selectedId}`,
  });

  return <div>{person?.name}</div>;
};

我还可以看到属性值已经更改，我的钩子没有重新运行，我如何才能在不重写useEffect中的逻辑的情况下实现这一点？

我希望钩子在props 更改时重新运行并获取结果，但它在初始渲染中只运行一次