I am facing issue in filtering JavaScript nested array of objects

I have a javasctpt array as mentioned below const mainCategories = [

{
id: 1,
name: “Men”,
categories: [
name:”Tshirt”,
image:”/img/shirt1.png”

]

},
{
id: 2,
name: “Women”,
categories: [
name:”Tshirt”,
image:”/img/shirt2.png”

]

},

{
id: 3,
name: “Men”,
categories: [
name:”Hat”,
image:”/img/hat1.png”

]

},

{
id: 4,
name: “women”,
categories: [
name:”Hat”,
image:”/img/hat1.png”

]

},

] I want to display categories array in jsx but only one image against same field. For example:- category name “Hat” should have only one image rest of one should be discarded. Eventually in resultant array I should have only objects i.e Tshirt and Hat and each of them should have only one image. Could anyone tell me how to achieve above objective.

I tried with JavaScript map method also filter method, but I could not be able to discard another image.