unable mapping through import react components using hooks - reactjs

Question

Im new to react so this may be a noob question.
Im trying create a side bar that only displays links depending on if a variable is set.
but first im just trying to create a useState hook that is an array of import components and map through them with some dummy data.
The problem is it keeps tell me the component is undefined when trying to map through them.
error:TypeError: Cannot read property 'SideBarLink' of undefined
What am I doing wrong?
Also if there is a better way to do what I am trying to please lmk.
SideBar.jsx------------------------------------------------------
]
import React, { useState } from 'react';
import SideBarLink from 'react';
const SideBar = () => {
const [sidelinks, setSideLinks] = useState( SideBarLink[
{
id: 1,
name: 'Projects',
displayLink: true
},
{
id: 2,
name: 'Tickets',
displayLink: true
}
]);
const handleClick =() =>
{
console.log(sidelinks);
}
let slinks = (
<div>
<button onClick={handleClick}>button</button>
<div className="w3-sidebar w3-bar-block" >
{
sidelinks.SideBarLink.map((SideBarLink, index) =>
{
return <SideBarLink />
})
}
</div>
</div>
);
return slinks;
}
export default SideBar;
SideBarLink.jsx-------------------------------------
import React from 'react';
const SideBarLink = ( props ) => {
return (
{props.name}
)
};
export default SideBarLink;