如何从useEffect和props中获取数据以同时渲染？

Question

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './Portfolio.css';

const Portfolio = ({stock}) => {
const [data, setData] = useState([]);
const [counter, setCounter] = useState(0);

useEffect(() => {
    (async () => {
      const data = await axios(
        `https://finnhub.io/api/v1/quote?symbol=${stock.quote}&token=${process.env.REACT_APP_API_KEY}`
          );
            setData(data.data);
            setCounter(counter + 1);
        })();
    },[]);

    return (
         <ul className="table-headings">
            <li>{counter}</li>
            <li>{stock.quote}</li>
            <li>${data.pc}</li>
            <li>${stock.cost}</li>
            <li>320 days</li>
            <li>36.78%</li>
        </ul>    
    )
}

export default Portfolio;

现在，首先渲染stock.quote，然后立即渲染stock.cost，这将导致2个单独的列表显示在屏幕上，这是我不想要的。如何同时渲染它们，使两个列表都在屏幕上显示在同一行？