Динамическое использование компонента Link в React-Router

В зависимости от условного выражения, хранящегося в состоянии компонента, я хотел бы, чтобы конкретный отображаемый компонент был либо обернут тегом Link, либо обычным тегом div (или тег не работает так же хорошо!)

То, что я сейчас делаю, кажется многословным и избыточным; Я чувствую, что есть более короткий способ написать этот компонент, чтобы мой код оставался СУХИМ.

Обе переменные, хранящие мои компоненты linkThumbnail и defaultThumbnnail, практически одинаковы, за исключением того факта, что одна из них содержится в компоненте Link.

Затем я использую тернарный оператор в операторе return, чтобы получить желаемый компонент.

Вот некоторый псевдокод в качестве примера:

import React, { Component } from "react";
import { Link } from "react-router-dom";

class ExampleComponent extends Component {
  state = {
    renderLink: false
  };

  render() {
    const linkThumbnail = (
      <Link
        to = {{
          pathname: `/someMovieId`,
          state: 'some-data'
        }}
      >
        <div>
          <div className='movie' onClick = {this.getMoviePreview}>
            <img
              src = {
                poster
                  ? `https://image.tmdb.org/t/p/w300${poster}`
                  : "https://via.placeholder.com/300"
              }
              alt='something here'
            />
          </div>
        </div>
      </Link>
    );

    const defaultThumbnail = (
      <div>
        <div className='movie' onClick = {this.getMoviePreview}>
          <img
            src = {
              poster
                ? `https://image.tmdb.org/t/p/w300${poster}`
                : "https://via.placeholder.com/300"
            }
            alt='something here'
          />
        </div>
      </div>
    );

    //here I use a ternary operator to show the correct component...shorter method of doing this?
return this.state.renderLink ? linkThumbnail : defaultThumbnail;
  }
}

export default ExampleComponent;