splice() is not emptying the array

Below code should return empty array but it is returning Banana,Banana,Banana

const fruits = ["Banana", "Banana", "Banana", "Banana", "Banana", "Banana"];

fruits.map((ele) => {
  if (ele === "Banana") {
    fruits.splice(0, 1)
  }
})

document.getElementById("demo").innerHTML = fruits;

<div id="demo"></div>