Warning: Failed prop type: The prop 'to' is marked as required in Link, but its value is undefined

Question

I have been getting this warning a lot but I am not sure how I am able to solve it. The 'to' attribute is the path that I want to redirect user to on click.

Below is the code for the relevant files.

SideMenu.js, is the main component which calls upon the SideMenuItem component.

MenuItems.map((menuItem, index) => ( 
    <SideMenuItem 
       key={index} 
       name={menuItem.name} 
       exact={menuItem.exact} 
       path={menuItem.path} 
       subMenus={menuItem.subMenus || []} 
       icons={menuItem.icons} 
       onClick={(e) => { 
          if (inactive) { 
             setInactive(false); 
          } 
       }} 
   /> 
))

SideMenuItem.js, is a component that calls upon the MenuItems component for the items to show in the side menu.

const SideMenuItem = (props) => { 
    const { name, subMenus, icons, path } = props; 
 
    return ( 
        <li onClick={props.onClick}> 
            {console.log(path)} 
            <Link 
                exact={"true"} 
                //  **The warning comes from here**
                to={path} 
                className={`menu-item`} 
            > 
                <div className="menu-icon"> 
                    {icons} 
                </div> 
                <span>{name}</span> 
            </Link> 
            {subMenus && subMenus.length > 0 ? ( 
                <ul className={`sub-menu`}> 
                    {subMenus.map((menu, index) => ( 
                        <li key={index}> 
                            <NavLink to={menu.path}>{menu.icons} {menu.name}</NavLink> 
                        </li> 
                    ))} 
                </ul> 
            ) : null} 
        </li> 
    ); 
}; 
 
export default SideMenuItem;

MenuItems.js

export const MenuItems = [ 
    { 
        name: "Home", 
        to: "/homepage", 
        icons: <AiIcons.AiFillHome />, 
    }, 
    { 
        name: "Settings", 
        icons: <RiIcons.RiSettings4Fill />, 
        subMenus: [ 
            { name: "Change Password", path: "/changePassword", icons: <MdIcons.MdPassword /> }, 
            { name: "Update Profile", path: "/updateProfile", icons: <AiIcons.AiOutlineProfile /> }, 
        ], 
    } 
];