creating a function that creates a dynamic path based on data fetched from API

Question

Each card contains a sentence, parts of which are made of data fetched from an API. When clicked, each Button wrapped element should take the user to the following link localhost3000/user/{seller}. In other words, I would like to take the seller data that was mapped and use that as the path for a link that should take the user to that path.

return (
    <PageLayout>
      <ul>
        {data.map((result) => {
          const {
            sale_id,
            buyer,
            seller,
            listing_price,
            listing_symbol,
            created_at_time,
          } = result;

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