Getting undefined when picking object property value from imported module

[kalkson]

Describe the bug I get undefined when selecting some SVG icon component (MUI-icons) from module object import. I have a simple file where I import all mui icons:

index.ts

export { default as Alert } from "./Alert";
export { default as Attach } from "./Attach";
export { default as Back } from "./Back";
export { default as Bank } from "./Bank";
export { default as Boost } from "./Boost";
export { default as Break } from "./Break";
export { default as Calendar } from "./Calendar";
export { default as Camera } from "./Camera";
export { default as CaretUp } from "./CaretUp";
export { default as CaretLeft } from "./CaretLeft";
export { default as CaretDown } from "./CaretDown";
export { default as CaretRight } from "./CaretRight";
export { default as Check } from "./Check";
export { default as CircledCheck } from "./CircledCheck";
export { default as ChevronDown } from "./ChevronDown";
export { default as ChevronUp } from "./ChevronUp";
export { default as ChevronLeft } from "./ChevronLeft";
export { default as ChevronRight } from "./ChevronRight";
export { default as CircledClose } from "./CircledClose";
export { default as CircledMinus } from "./CircledMinus";
export { default as CircledPlay } from "./CircledPlay";
export { default as CircledPlus } from "./CircledPlus";
export { default as Clipboard } from "./Clipboard";
export { default as Cloud } from "./Cloud";
export { default as Clock } from "./Clock";
export { default as ClockIn } from "./ClockIn";
export { default as Clone } from "./Clone";
export { default as Close } from "./Close";
export { default as CollapseLeft } from "./CollapseLeft";
export { default as CollapseRight } from "./CollapseRight";
export { default as ClockOut } from "./ClockOut";
export { default as CoverRequest } from "./CoverRequest";
export { default as CreditCard } from "./CreditCard";
export { default as Dashboard } from "./Dashboard";
export { default as Day } from "./Day";
export { default as Delete } from "./Delete";
export { default as DisLike } from "./DisLike";
export { default as Documents } from "./Documents";
export { default as Dollar } from "./Dollar";
export { default as Download } from "./Download";
export { default as Employee } from "./Employee";
export { default as EndBreak } from "./EndBreak";
export { default as Edit } from "./Edit";
export { default as ExternalLink } from "./ExternalLink";
export { default as FaceID } from "./FaceID";
export { default as FaceIDError } from "./FaceIDError";
export { default as Filter } from "./Filter";
export { default as FindCover } from "./FindCover";
export { default as Field } from "./Field";
export { default as Flag } from "./Flag";
export { default as Gift } from "./Gift";
export { default as Grip } from "./Grip";
export { default as Hire } from "./Hire";
export { default as Help } from "./Help";
export { default as Home } from "./Home";
export { default as Image } from "./Image";
export { default as Info } from "./Info";
export { default as Invisible } from "./Invisible";
export { default as Laptop } from "./Laptop";
export { default as Like } from "./Like";
export { default as Link } from "./Link";
export { default as Log } from "./Log";
export { default as LogIn } from "./LogIn";
export { default as LogOut } from "./LogOut";
export { default as Location } from "./Location";
export { default as Lock } from "./Lock";
export { default as Mail } from "./Mail";
export { default as Manage } from "./Manage";
export { default as Menu } from "./Menu";
export { default as Minus } from "./Minus";
export { default as Message } from "./Message";
export { default as Mobile } from "./Mobile";
export { default as Next } from "./Next";
export { default as Night } from "./Night";
export { default as Note } from "./Note";
export { default as Notification } from "./Notification";
export { default as OpenShift } from "./OpenShift";
export { default as OverflowHorizontal } from "./OverflowHorizontal";
export { default as OverflowVertical } from "./OverflowVertical";
export { default as Overtime } from "./Overtime";
export { default as Payroll } from "./Payroll";
export { default as PDF } from "./PDF";
export { default as Percentage } from "./Percentage";
export { default as Pin } from "./Pin";
export { default as Phone } from "./Phone";
export { default as Plus } from "./Plus";
export { default as Play } from "./Play";
export { default as Rain } from "./Rain";
export { default as Redo } from "./Redo";
export { default as Refresh } from "./Refresh";
export { default as Repair } from "./Repair";
export { default as Report } from "./Report";
export { default as Safety } from "./Safety";
export { default as Schedule } from "./Schedule";
export { default as Screen } from "./Screen";
export { default as Search } from "./Search";
export { default as Select } from "./Select";
export { default as Send } from "./Send";
export { default as Settings } from "./Settings";
export { default as Share1 } from "./Share1";
export { default as Share2 } from "./Share2";
export { default as Sort } from "./Sort";
export { default as SortAscending } from "./SortAscending";
export { default as SortDescending } from "./SortDescending";
export { default as Star } from "./Star";
export { default as Storm } from "./Storm";
export { default as Support } from "./Support";
export { default as Team } from "./Team";
export { default as TimeOffApproved } from "./TimeOffApproved";
export { default as Tip } from "./Tip";
export { default as Trade } from "./Trade";
export { default as Undo } from "./Undo";
export { default as UnscheduledShift } from "./UnscheduledShift";
export { default as Visible } from "./Visible";
export { default as Watch } from "./Watch";

Then importing them in component file like that:

import * as Icons from "../../assets/icons/mui-icons";

I want to give possibility to easily select desired icon in icon wrapper by typing icon name in prop icon:

interface IconWrapperProps {
  size: "small" | "medium" | "large";
  icon: keyof typeof Icons;
}

And choose the icon this way:

  const IconToRender = Icons[icon]; // undefined

It returns undefined. During the app runtime everything works well and I can to it with above solution. However using storybook means problem. Import is correct: