Renders too much components

Question

I have a columns and cards in it. When i click on card it should expand. At first i wanted to watch how it looks. But instead one card modal window it rendered four. By the number of columns.

So for the test i have an array with data:

const dataSource = [
    {
      title: 'TODO',
      cards: [
        {
          title: 'card1',
          data: 'data1',
          author: 'ABOBA',
          comments: 10
        }, {
          title: 'card2',
          data: 'data2',
          author: 'ABOBA',
          comments: 10
        }, {
          title: 'card3',
          data: 'data3',
          author: 'ABOBA',
          comments: 10
        },
      ]
    },
...
]

It is how i render cards:

return (
    <StyledContentBlock>
      {dataSource.map((item, index) =>
        <Column title={item.title} key={index}>
          {item.cards.map((card, index) => <Card dataSource={card} key={index}/>)}
        </Column>)}
    </StyledContentBlock>
  )

It is code for card:

import React, {FunctionComponent} from 'react';
import {ICardProps} from "./interfaces";
import {StyledCard} from "./styles";
import ModalCard from "../ModalCard";

const Card: FunctionComponent<ICardProps> = (props) => {
  const {dataSource} = props
  const {title, data, comments, author} = dataSource

  return (
    <StyledCard onClick={() => <ModalCard dataSource={dataSource}/>}>
      {title}
    </StyledCard>
  )
};

export default Card;

And modal card code:

import React, {FunctionComponent} from 'react';
import {CardExpandedBlock, StyledModalCard} from "./styles";
import {ICardProps} from "../Card/interfaces";

const ModalCard: FunctionComponent<ICardProps> = (props) => {

  const {dataSource} = props
  const {title, data, author, comments} = dataSource

  return (
    <>
      <CardExpandedBlock/>
      <StyledModalCard>

      </StyledModalCard>
    </>
  )
};

export default ModalCard;

So I cant understand why it renders 4 times modal window, and how to solve this.