SPA на реакт, как прокинуть пропс

компонент Popular и TopRated рендерить данные с помощью компонента RenderListOfElement. При клике на какой-либо элемент списка мне надо пробросить ИД этого элемента в компонент TvShowInfo

  const RenderListOfElement = props => {
  let [tvShowList, setTvShowList] = useState([]);
  let [isLoading, setIsLoading] = useState(true);
  let url = props.fetchUrl;
  const fetchDataByUrl = async url => {
    const data = await getData(url);
    setTvShowList(data);
    setIsLoading(false);
  }
  useEffect(() => {
    fetchDataByUrl(url);
  }, [url]);
  const setFilmID = id => {
    FILMID = id
    console.log(FILMID)
  }
  return isLoading ? (
    "lading"
  ) : (
      <>
    <ul>
      {tvShowList.results.map(({ original_name, id }) => (
        <li key={id} onClick={() => {setFilmID(id)}}>
          <Link to={`/info`}>{original_name}</Link>
        </li>
      ))}
    </ul>
    </>
  );
};

const App = () => {
return(
    <>
    <Router>
<Switch>
  <Route exact path='/'  component={Pagination, Popular} />
  <Route path='/popular' component={Popular}/>
  <Route path='/toprated' component={TopRated}/>
  <Route path='/info' component={TvShowInfo} />
</Switch>
    </Router>   
    </>
)

}

export const TvShowInfo = props => {
  console.log(props)
    return(
        <div>sss</div>
    )
}