Console and browser display this In the first for of loop I get 10 different results as expected. in the second for loop when i call it it gives me 10 times the same result. why this happens and how do i fix it?

 const inputValue = document.getElementById("searchbarInput").value;
 const searchUrl = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/search?query=${inputValue}&limit=10&exchange=NASDAQ`;

const options = {
filter: '',
sort: 1}
async function displaydata() {
let url = searchUrl;
let response = await fetch(url);
let data = await response.json();

//log company info

const mappedList = data.map((x) => ({
    name: x.name,
    symbol: x.symbol,
    ceo: x.ceo
}))


for (let info of mappedList) {
    const companyInfo = await fetchMoreInfo(info.symbol);
    ceo = companyInfo.profile.ceo; // here returns a 10 different items
}

document.getElementById('root').replaceChildren();

for (comp of mappedList) {
    const div = document.createElement('div');
    div.innerHTML = `<a href="/company.html?symbol=${comp.symbol}">${ceo} ${comp.name}(${comp.symbol})</a>` + "<br>";
    document.getElementById('root').appendChild(div); //here it gives me the same  10 itmes}}

const fetchMoreInfo = async(companySymbol) => {
let url = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/company/profile/${companySymbol}`;
let response = await fetch(url);
let compData = await response.json();
return compData;

}