问使用父组件传递的支柱呈现子组件时出错

EN

function App() {
  const [isToggled, setIsToggled] = useState(false);
  const [data, setData] = useState({});
  const [coin, setCoin] = useState("bitcoin");

  const getData = () => {
    axios({
      method: "GET",
      url: `https://api.coingecko.com/api/v3/coins/${coin}?localization=en`,
    })
      .then((response) => {
        console.log(response.data);
        setData(response.data);
        
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getData(coin);
  }, []);

  return (
    <div>
      <HeaderContainer />
      <Search getData={getData} coin={coin} setCoin={setCoin} />
      <Info mcap={mcap} data={data} />
    </div>
  );
}

function Info({ image, mcap, data }) {
 return (
    <div className="info-container">
      <div className="left-column">
        <div className="top-row">
          <div className="coin-icon-container">
            <img
              className="coin-icon"
              src={data.image.large}
              alt="coin logo"
              width="40px"
              height="40px"
            ></img>
          </div>
          <div className="coin-name-container">
            <p className="coin-name">{data.name}</p>
            <p className="coin-abbr">{data.symbol}</p>
          </div>
          <div className="coin-MCAP-details">
            <p className="coin-position">#{data.market_cap_rank}</p>
            <p className="coin-MCAP">{data.market_data.market_cap.usd}</p>
          </div>

{
    "id": "bitcoin",
    "symbol": "btc",
    "name": "Bitcoin",
    "asset_platform_id": null,
     .......
    "image":{
    "thumb": "https://assets.coingecko.com/coins/images/1/thumb/bitcoin.png?1547033579",
    "small": "https://assets.coingecko.com/coins/images/1/small/bitcoin.png?1547033579",
    "large": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579"
    }
    .........
}