javascript - 動的ルーティングを使用して情報を渡す/反応する方法

Question

は、それぞれが新しいページにリンクするようButtonListにフィルター処理されたリストを返します。Buttons動的ルートを追加することで実現したいのですが、コードの書き方がわからない... history.push を正しく使用するにはどうすればよいですか? どんな助けでも大歓迎です。

export default function Home() {
  const [searchValue, setSearchValue] = useState("");
  const history = useHistory();

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchValue.toLowerCase())
  );

  function handleSearch(value) {
    setSearchValue(value);
  }

  const selectedItem = filteredData.find(item => item.name);

  function handleSelect(item) {
    history.push(`/home/${item.name}`);
  }

  return (
    <WrapperDiv>
      <StyledHeader />
      <Switch>
              
        <Route exact path="/home">
                
          <Searchbar onSearch={handleSearch} />
          <ButtonList data={filteredData} onClick={handleSelect} /> 
        </Route>
        <Route exact path="/home/{...}">
          <StyledDiv>
            <Button item={selectedItem} light />
            <AccordionList />
          </StyledDiv>
        </Route>
      </Switch>
    </WrapperDiv>
  );
}

export default function Button({ children, handleSelect }) {
  return (
    <button
      to={{
        pathname: "/home/" + data.name,
        data: data
      }}
      onClick={handleSelect}
    >
      {children}
    </button>
  );
}

export const data = [
  {
    name: "Apple",
    id: 1 
  },
  {
    name: "Banana",
    id: 2 
  },
  {
    name: "Blueberry",
    id: 3 
  }
];