Есть ли решение сделать только одну карту вместо нескольких?

Question

Я пытаюсь отобразить некоторые данные в своем приложении, но когда я использую данные и пытаюсь отобразить, появляется несколько карт, но мне нужна только одна карта со всеми данными, которые я хочу

Iуже показывают данные, но не правильно

PokemonSpecies.js

import React from "react";
// import Loader from "./Loader";
import { Card, Col } from "react-bootstrap";

import { Container, Row } from "react-bootstrap";
import CardPokemon from "./containers/CardPokemon";


class PokemonSpecies extends React.Component {
  state = {
    data: [],
    dataStats: [],
    dataTypes: [],
    isLoading: false,

  };

  async componentDidMount() {
    const id = this.props.match.params.id;

    this.setState({ isLoading: true });
    try {
      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
      const json = await response.json();
      this.setState({
        data:json,
        dataStats: json.stats,
        dataTypes: json.types,
        isLoading: false
      });
      console.log({ json });
    } catch (err) {
      console.log(err.msg);
      this.setState({ isLoading: false });
      throw err;
    }
  }

  render() {
    const {data,dataStats,dataTypes} = this.state;
    return (
      <div className="Pokemon">
        <Container>
          <Row>
            <Col lg="4"></Col>
            <Col lg="4">

              <CardPokemon data={data} dataStats={dataStats} dataTypes={dataTypes} />


            </Col>

            <Col lg="4"></Col>
          </Row>
          <Row></Row>
        </Container>
      </div>
    );
  }
}

export default PokemonSpecies;

CardPokemon.js

import React from 'react';

import DataSinglePokemon from './DataSinglePokemon'

const CardPokemon =({data,dataStats,dataTypes}) =>{

  return(

  <>
  {dataStats.map((info,index) =>(
            dataTypes.map((info2) =>(

<DataSinglePokemon 
id={data.id} 
name={data.name.toLowerCase().split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join(' ')}
height={data.height}
weight={data.weight}
{...info2}
type={info2.type.name.toLowerCase().split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join(' ')}

{...info}
base_stat={info.base_stat }
name_stat={info.stat.name}

  />
            ))

      ))}

</>
  );
}




export default CardPokemon

DataSinglePokemon.js

import React from "react";
import { Card, Col } from "react-bootstrap";
import "../../App.css";
const DataSinglePokemon = props => {

  const { 


    type,
    weight,
    name_stat, 
    base_stat,
    height,
    name, 
    id
  } = props;



  const urlImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png?raw=true`;
  return (
    <>
      <Card >
                <Card.Header>{id}</Card.Header>

                <Card.Body className="mx-auto">
                  <Card.Title> {name} </Card.Title>
                  <Card.Text>
                    <img alt={name} src={urlImage} />
                    <br></br>
                    <span>Types : {type} </span> 
                    <br></br>
                    Taille : {height} 
                    <br></br>
                    Poid : {weight} 

<br></br>

                  Statistiques : 

                  <li > {name_stat} : {base_stat} </li>
                  </Card.Text>
                </Card.Body>
              </Card>
              </>

  );
};

export default DataSinglePokemon;

Iиметь этот результат с несколькими картами: https://imgur.com/no4z6Cn