So I have an array object productsByVendorPaginated which contains nested array of data named objects. Here is the structure.

"productsByVendorPaginated": {
      "objects": [
        {
          "id": "d2e252ae-d0a9-4431-81ef-177c7fcacc16",
          "sellingPrice": 15000,
          "image": "http://ashewary.com/media/prod-image/1649447703.jpg"
        }
      ]
    }

Here is what I tried but I got nothing, just blank screen.

const DisplayData = datas?.productsByVendorPaginated?.objects
        ?.filter((vendors) => vendors?.id === id)
        ?.map((vendors) => {
            return (
                <div class="flex justify-evenly items-center mt-10">
                    <div
                        key={vendors.id}
                        class=" mt-10 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5 "
                    >
                        <div>
                            <div>{vendors.sellingPrice}</div>
                        </div>
                    </div>
                </div>
            )
        })

What's my mistake here?

How can I map through objects array and display values in a div?

Thanks