Pass data to component using state

The ButtonList returns a list of filtered buttons that each link to a new page. Now I want that clicked-on button to also be displayed on the linked page. I don't quite understand how to save the data inside the button (a string) and pass it to the Button on the linked page. I assume I can do it with state (hence the buttonContent), but don't know how to write the code... Any help would be highly appreciated.

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

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

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

  function handleButtonContent() {
    setButtonContent(!buttonContent);
  }

  return (
    <WrapperDiv>
      <StyledHeader />
      <Switch>
              
        <Route exact path="/home">
                
          <Searchbar onSearch={handleSearch} />
          <ButtonList
            data={filteredData}
            onClick={handleButtonContent}
          />
           
        </Route>
        <Route exact path="/home/content">
          <div>
            <Button light>{buttonContent}</Button>
          </div>
        </Route>
      </Switch>
    </WrapperDiv>
  );
}