Преобразование карты в строку

Для этого вам нужно использовать .join().

Ваш окончательный код выглядит так:

const mainData = filteredCardMemberData.map((info) => info.productDescription);

const finalData = mainData.join(', ');

return <div>{finalData}</div>;

const DisplayData = filteredCardMemberData.map(
  (info) => (
    // eslint-disable-next-line react/jsx-key -- disabling eslint rule
    <div> {info.productDescription}</div>
  )
).join(', ');

Вы можете использовать метод соединения для этого

const DisplayData = filteredCardMemberData.map(
  (info) => (
    // eslint-disable-next-line react/jsx-key -- disabling eslint rule
    <div> {info.productDescription}</div>
  ).join(',')
);

Если я прав, вы используете ReactJS. Рассмотрите возможность использования хука React useMemo для запоминания результата, если данные дороги для вычисления или часто меняются:

import {useMemo} from 'react'

const finalData = useMemo(() => {
  const mainData = filteredCardMemberData.map(
    ({productDescription}) => productDescription   // you can also access the value like this productDescription.value
  )
  return mainData.join(', ')
}, [filteredCardMemberData])

Это приведет к пересчету данных только в том случае, если массив зависимостей (в данном случае filteredCardMemberData) изменится. Вот еще немного информации, которую, я думаю, вам нужно прочитать: эффективный способ объединения строк

Вот демо:- CodeSandBox