Не удается получить доступ к значению состояния с помощью компонента React Router Link

Question

Я пытаюсь передать изображение плаката от компонента A к компоненту B. Я искал много разных примеров, но ничего не работает.Я использую React-Router v4 и Link для этого.Я настроил свой компонент A следующим образом, используя Cloudinary React API для загрузки изображений большого пальца.

class Topics extends Component {
 state = {
  topics: [
   {id: 1, text:'Learning', thumb:'Learning', poster: '../static/street.jpg'}, 
   {id: 2, text:'Healthy Living', thumb:'Healthy', poster: '../static/healthy-crop.jpg'}, 
   {id: 3, text: 'Mentorship', thumb:'Mentor'}, 
   {id: 4, text: 'Community', thumb: 'Neighbour'}, 
   {id: 5, text: 'Economic Dev', thumb: 'open'}, 
   {id: 6, text: 'Urban Parks', thumb:'Park'}
  ]
 };

 render() {
  const { topics } = this.state;
  return (
   <section>
    <CloudinaryContext cloudName='dxanqdr7i'>
      <PageTitle>Topics</PageTitle>
      <h2>Choose a topic from below to learn more</h2>
      <div>
        {topics.map((topic, index) => (
          <div key={index}>                
            <Link 
              key={topics.id} 
              to={{
                pathname: `/${topic.text}`,
                state: {
                  poster: topic.poster
                }
              }}>
              {topic.text}
            </Link>
            <Image key={topic}  publicId={topic.thumb} 
              dpr="auto"
              responsive
              width='auto'
              crop="scale">
            </Image>
          </div>
        ))}
      </div>
    </CloudinaryContext>
   </section>
  );
 }
}

Мой компонент B получает реквизиты.Если я console.log(this.props.location.state);, изображение плаката возвращается в консоли.Если я добавлю this.props.location.state.poster, я получу ошибку: TypeError: cannot read property 'poster' of undefined.Он - мой Компонент B.

class Topic extends Component{
 render() {
  const { poster } = this.props.location.state;
  return (
   <React.Fragment>
    <div style={{backgroundImage: `url(${poster})`}}>
      <h1>{this.props.match.params.topicId}</h1>
    </div>
   </React.Fragment>
  );
 }
}

Любая помощь будет принята, поскольку я не понимаю, почему это происходит.