React Router issue – component not calling async

I’m using React Router to allow the user to visit dynamic URLs:

<Route path=’/test/:id’> <Page /> </Route>

In Page, I am simply rendering a <Card>:

return( <> {id == 0 ? null : <LinkContainer to={id-1}><Button>Previous</Button></LinkContainer>} {id == 10 ? null : <LinkContainer to={id+1}><Button>Next</Button></LinkContainer>} {id >= 0 || id <= 10 ? <Card id={id}/> : null} </>

The Card component just displays an mp4 along with some information:

const [info, setInfo] = useState(null); async function getInfo() { const data = await fetch() setInfo(data) } useEffect(() => { getInfo(); }, []) return ( <Container> <video src={url + props.id}/> {info} </Container>

This works on the initial page load, eg. so if I visit /test/5 it will load the right video and info. But, if I click ‘next’ or ‘prev’, the info will not update and will be the same as /test/5. The video changes correctly, however.

Any idea on how to get it to update?

Thanks