我创建了一个自定义钩子，它接受一个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>;
};

我还可以看到prop值已经更改，我的hook没有重新运行，如何在不重写useEffect中的逻辑的情况下实现它？
我希望钩子在属性改变时重新运行并获取结果，但它在初始渲染中只运行一次