Why is my array not seen as an array?

When I map my array list of objects in the same file it works without any problems,
but once I try to pass the data to ‘DisplayWeapon’ it’s either empty or not of type array
and I get the error TypeError: items.map is not a function

import React, { useState, useEffect } from "react";

import { weapons } from "./WeaponsList";

import DisplayWeapon from "./components/DisplayWeapon";

const App = () => {

  const [items, setItems] = useState([]);

  useEffect(() => {

    setItems(weapons);

  }, []);

  return (

    <div className="container">

      <DisplayWeapon items={items} />

    </div>

  );

};

export default App;

and ‘DisplayWeapon.js’

import React from "react";

const DisplayWeapon = (items) => {

  console.log(items);

  return (

    <div>

      {items.map((item) => (

        <h1>{item.name}</h1>

      ))}

    </div>

  );

};

export default DisplayWeapon;

and here is my alternative version, which works fine

import React, { useState, useEffect } from "react";
import { weapons } from "./WeaponsList";
//import DisplayWeapon from "./components/DisplayWeapon";

const App = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    setItems(weapons);
  });

  return (
    <div className="container">
      <div>
        {items.map((item) => (
          <h1>
            {item.name} {item.id}
          </h1>
        ))}
      </div>
    </div>
  );
};

export default App;

Also here is my ‘WeaponList.js’ which I think is fine, but still

export const weapons = [

  {

    name: "Sword",

    id: 1,

  },

  {

    name: "Axe",

    id: 2,

  },

  {

    name: "Greatsword",

    id: 3,

  },

  {

    name: "Hammer",

    id: 4,

  },

];

I can’t seem to find the issue

its the last bit of code

the Problem were the brackets around the items prop it should be

const DisplayWeapon = ({items}) =>

instead