How to render the CircleTopik component only in the middle Card component?

Question

React

function Card() {
  return (
    <div className={s.mainBlock}>
      <CircleTopik />
    </div>
  )
}

function App() {
  return (
    <div className={s.app}>
      <Card />
      <Card />
      <Card />
    </div>
  )
}

Answer 1

function Card(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card>
        <CircleTopik />
      </Card>
      <Card />
    </div>
  );
}

or

function Card({ showCircle }) {
  return (
    <div>
      {showCircle ? <CircleTopik /> : null}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card showCircle={true} />
      <Card />
    </div>
  );
}