передача массива в качестве параметра в функцию styleled-component

Question

Я пытаюсь создать боковую панель, используя стилизованные компоненты.У меня есть заголовок (обычные компонентыactJS), который создает боковую панель (стиль-компонент).Он передает список имен для NavItems, которые будут использоваться компонентом боковой панели при создании боковой панели.Однако массив имен внутри SideBar выдает неопределенную ошибку.

Я попытался определить образец массива на боковой панели, вместо того, чтобы передавать его из заголовка, тогда код работает отлично.Но когда тот же массив прибывает из Заголовка, это терпит неудачу.Я пытался использовать props.items, все еще не работает.

Header.js

const navItems = [{ name: 'item 1' }, { name: 'item2' }];
const Header = () => (
    <div>
        <Sidebar navItems={navItems}></Sidebar>
        <Image src={wave}></Image>
    </div>
  );
export default Header;

Sidebar.js

const Nav = styled.nav`
 height: 100%;
  width: 180px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #edf2f7  ;
  overflow-x: hidden;
  padding-top: 20px;`
;
const NavLink = styled.a`
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
&:hover {
 color:  #fc721d;
}
`;
function Sidebar ({navItems}) {
      const itemList = navItems.map(item => (
        <NavLink>{navItems.name}</NavLink> 
      ));
  return (
    <Nav>{itemList}</Nav>
  );
}
export default Sidebar;

Код отлично работает, когда я не передаю массив как реквизиты, вместо этого определяю его внутренне

function Sidebar () {
    const navItems = [{ name: 'item 1' }, { name: 'item2' }];
      const itemList = navItems.map(item => (
        <NavLink>{item.name}</NavLink> 
      ));
  return (
    <Nav>{itemList}</Nav>
  );
}
export default Sidebar;

Ожидаемый результат: боковая панель с элементами 1 и 2 в качестве элементов навигации.

Ожидаемый результат