React: Как перебросит данные из объекта на другой компонент?
Если у вас одни и те же данные шарятся между разными страницами, эти данные вполне сойдут за глобальное состояние приложения.

Есть несколько способов его хранить и менять:

а) хранить данные в контексте и получать их и метод для их изменения путём подключения к контексту (см. useContext или contextType, в зависимости от функциональности/классовости компонента).
б) использовать сторонние решения для управления состоянием. На выбор redux, mobx, effector и прочие библиотеки.
Можно поместить data в контекст, ну и обращаться где захочется с помощью useContext.

И тогда получится что-то такое:
const AppMessageItems = () => {
  const { id } = useParams(); // react-router-dom hook
  const subset = useContext(YourContextName).find(item => item.id === id);

  return (
    <Container>
      <div> Id: {subset.id}</div>
      <div> Text: {subset.text}</div>
      ... 
    </Container>
  );
};