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

What does the WeaponsList.js file look like exactly?

its the last bit of code

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

const DisplayWeapon = ({items}) =>

instead