如何在reactjs中同时渲染不同的api组件？

import React, { useState, useEffect } from 'react';

const ApiComponent = () => {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setApiData(data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {apiData ? <ApiComponentA data={apiData} /> : null}
      {apiData ? <ApiComponentB data={apiData} /> : null}
      {apiData ? <ApiComponentC data={apiData} /> : null}
    </div>
  );
};

const ApiComponentA = ({ data }) => {
  // 渲染API组件A的代码
  return <div>API组件A</div>;
};

const ApiComponentB = ({ data }) => {
  // 渲染API组件B的代码
  return <div>API组件B</div>;
};

const ApiComponentC = ({ data }) => {
  // 渲染API组件C的代码
  return <div>API组件C</div>;
};

const App = () => {
  return (
    <div>
      <h1>React App</h1>
      <ApiComponent />
    </div>
  );
};

export default App;