UseRouteMatch does not match id of URL

I solved it by using UseRouteMatch in the component and then sending the whole data to the component, and filtering the one i clicked on out. Like the following

const Anecdote = ({ anecdote, all }: any) => {
  console.log('anecdote is ', anecdote)
  console.log('path is ',useRouteMatch())
  console.log('all is ', all)
  let {path, url} = useRouteMatch()
  console.log('id is ',url.split('/')[2])
  const data = all.find((alll: any) => alll.id === url.split('/')[2])
  return (
    <div>
      <h2>{data.content}</h2>
      <p>{data.author}</p>
      <p>{data.info}</p>
      <p>{data.votes}</p>
      {/* <div>{note.user}</div> */}
      {/* <div><strong>{note.important ? 'important' : ''}</strong></div> */}
    </div>
  )
}

Thanks