Trying to retrieve an avatar image from an API but receiving an error of avatar not defined

userData is a function that receives user data from an API using getUserByChainAccount. getUserByChainAccount requires a username, which in this case is dynamically retrieved from buyer.

I’m interested in avatar , but I keep getting the following error Unhandled Runtime Error
ReferenceError: avatar is not defined

  return (
    <PageLayout>
      <ul>
        {sales.map((result) => {
          const {
            sale_id,
            buyer,
            seller,
            listing_price,
            listing_symbol,
            created_at_time,
          } = result;
          const userData = async (buyer) => {
            const user = await proton.getUserByChainAccount(buyer);
            const { name, avatar } = user;
          };

          function HandleBuyerClick() {
            window.location = '/user/' + buyer;
          }
          function HandleSellerClick() {
            window.location = '/user/' + seller;
          }

          if (buyer !== null) {
            return (
              <Card>
                <li key={sale_id}>
                  <h3>
                    <Transaction>
                      {avatar}
                      <Button onClick={HandleSellerClick}>{seller}</Button>
                    </Transaction>{' '}
                    just sold item number
                    <Transaction>
                      <Button>{sale_id}</Button>
                    </Transaction>{' '}
                    to{' '}
                    <Transaction>
                      <Button onClick={HandleBuyerClick}>{buyer}</Button>
                    </Transaction>{' '}
                    for <Transaction>{formatNumber(listing_price)}</Transaction>{' '}
                    {listing_symbol} at {parseTimestampJM(created_at_time)}
                  </h3>
                </li>
              </Card>
            );
          }
        })}
      </ul>
    </PageLayout>
  );
}