Problems while importing react-icon-cloud - reactjs

Question

when im trying to import the code via sandbox or trying to modify the github repo code its giving me (NextJS)
im not used to typescript btw and when im directly importing code from codesandbox its showing me no tags since its not dynamically imported as required in NEXTJS
heres the error
'Cannot read properties of undefined (reading 'forEach')' error
heres the code btw ( og github link for reference : https://github.com/teaguestockwell/react-icon-cloud )
import allIcons from "simple-icons";
import { v4 } from "uuid";
import {
Cloud,
renderSimpleIcon,
fetchSimpleIcons,
SimpleIcon,
} from "react-icon-cloud";
const Componente = () => {
const tagCanvasOptions = {
clickToFront: 500,
// decel: number
depth: 1,
imageScale: 2,
initial: [0.1, -0.1],
outlineColour: "#0000",
reverse: true,
tooltip: "native", // null | 'div'
// tooltipClass: string
tooltipDelay: 0,
wheelZoom: false,
};
const slugs = [
"typescript",
"javascript",
"dart",
"java",
"react",
"flutter",
"android",
"html5",
"css3",
"nodedotjs",
"express",
"nextdotjs",
"prisma",
"amazonaws",
"postgresql",
"firebase",
"nginx",
"vercel",
"testinglibrary",
"jest",
"cypress",
"docker",
"git",
"jira",
"github",
"gitlab",
"visualstudiocode",
"androidstudio",
"sonarqube",
"figma",
];
const useIcons = (slugs) => {
const [icons, setIcons] = React.useState();
React.useEffect(() => {
fetchSimpleIcons(slugs).then(setIcons);
}, []);
if (icons) {
return Object.values(icons.simpleIcons).map((icon) =>
renderSimpleIcon({
icon,
size: 42,
aProps: {
onClick: (e) => e.preventDefault(),
},
})
);
}
return <a>Loading</a>;
};
const icons = useIcons(slugs);
return (
<div>
<Cloud>{icons}</Cloud>
</div>
);
};
export default Componente;