Why I get double number of items in my array? [closed]

I’d like to see two items in the result but I’m getting them twice, why?

let arr = [];

for (let i = 0; i < 2; i++) {
  arr.push(i);
}

document.getElementById("demo").innerHTML = arr.fill(
  arr.map((item) => item * 10)
);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>

  <p id="demo"></p>

</body>

</html>