Unable to save data in an Excel Sheet with React/Nextjs

Question

I want to scrape a website and save data in an Excel Sheet and show data in a normal way as I would manually type it in an Excel Sheet.

But the problem is that I'm saving an Excel sheet with column headers only with no data in rows. What am I missing?

Code

'use client';
export default function Home({data}) {
  const $ = cheerio.load(data ?? '<></>');
  const router = useRouter();
  const [number, setNumber] = useState(1);
  const [url, setUrl] = useState('');

  const workbook = new Excel.Workbook();
  const worksheet = workbook.addWorksheet('World Countries');

  const countryName = $(`h3.country-name:nth-child(${number})`).text();
  const countryCapital = $(`span.country-capital:nth-child(${number})`).text();
  const countryPopulation = $(`span.country-population:nth-child(${number})`).text();
  const countryArea = $(`span.country-area:nth-child(${number})`).text();

  worksheet.columns = [
    { key: 'countryName', header: 'Country Name', width: '30' },
    { key: 'countryCapital', header: 'Country Capital', width: '30' },
    { key: 'countryPopulation', header: 'Country Population', width: '30' },
    { key: 'countryArea', header: 'Country Area', width: '30' },
  ];


  useEffect(()=>{
    router.push({
      pathname: '/',
      query: url && `url=${decodeURIComponent(url)}`
    })
  },[url]);

  
  const getExcelFile = async () =>{
    worksheet.addRow({countryName, countryCapital, countryPopulation, countryArea});
    const buffer = await workbook.xlsx.writeBuffer();
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const fileExtension = '.xlsx';
    const blob = new Blob([buffer], {type: fileType});
    saveAs(blob, `world-countries${fileExtension}`);
 }

}


export async function getServerSideProps({ query }) {
  const { url } = query;
  const response = await fetch(url);
    const data = await response.text();
    return {
      props: { data },
    };
}

Excute getExcelFile function

 return (
    <main className="flex min-h-screen flex-col items-center justify-between bg-slate-800">
      <h1 className='text-center'>Website Scraper</h1>
      <Space.Compact>
          <Input placeholder='Linkedin url...' value={url} onChange={(e) => setUrl(e.target.value)}/>
          <InputNumber  value={number} onChange={(number) => setNumber(number)}/>
          <Button type="primary" htmlType='button' onClick={getExcelFile}>Scrape</Button>
      </Space.Compact>
    </main>
  )

Input field