Getting error in rx.foreach

[xFarzin]

im getting this error on my component with the skill bar function. the skill bar func is doing great without rx foreach's but when i put it in this code its getting me error

Code :
def skills_section() -> rx.Component :
skillCats,skills = database.getSkills()
return rx.hstack(
rx.foreach(
skillCats,
lambda cat: section_card(
rx.flex(
rx.flex(
rx.icon(config.icons.get(cat), size=24, color="#0398F6"),
rx.heading(cat, size="6", color="white"),
align_items="center",
gap="12px",
margin_bottom="24px",
justify="start"
),
#SkillBars...
rx.fragment(
rx.text("Hi"),
rx.foreach(
skills.get(cat,[]),
lambda sk: funcs.skill_bar(sk),
),
)
),
cat,
(State.hovered_section != "") & (State.hovered_section != cat),
"medium",
),
),
width="100%",
)

Skill Bar :
def skill_bar(skill) -> rx.Component: #[name,level,category]
return rx.box(
rx.flex(
rx.text(skill[0], color="#d1d5db"),
rx.text(f"{skill[1]}%", color="#22d3ee"),
justify="between",
margin_bottom="8px"
),
rx.box(
rx.box(
width=f"{skill[1]}%",
height="8px",
background=config.colors.get("programming"),
border_radius="4px",
transition="width 0.5s ease"
),
width="100%",
height="8px",
background="#374151",
border_radius="4px"
),
margin_bottom="16px"
)

error :
[Reflex Frontend Exception] Fragment_5330e272d2d3d3e0e197bedd59de6a62/<.children<.children<.children<.c hildren<.children<.children<@webpack-internal:///(pages-dir-browser)/./pages /index.js:756:73 Fragment_5330e272d2d3d3e0e197bedd59de6a62@webpack-internal:///(pages-dir-bro wser)/./pages/index.js:682:31 react-stack-bottom-frame@webpack-internal:///(pages-dir-browser)/./node_modu les/react-dom/cjs/react-dom-client.development.js:22429:20 renderWithHooks@webpack-internal:///(pages-dir-browser)/./node_modules/react -dom/cjs/react-dom-client.development.js:5758:40 updateFunctionComponent@webpack-internal:///(pages-dir-browser)/./node_modul es/react-dom/cjs/react-dom-client.development.js:8019:19 beginWork@webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/c js/react-dom-client.development.js:9684:18 runWithFiberInDEV@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:544:16 performUnitOfWork@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:15045:22 workLoopSync@webpack-internal:///(pages-dir-browser)/./node_modules/react-do m/cjs/react-dom-client.development.js:14871:58 renderRootSync@webpack-internal:///(pages-dir-browser)/./node_modules/react- dom/cjs/react-dom-client.development.js:14851:11 performWorkOnRoot@webpack-internal:///(pages-dir-browser)/./node_modules/rea ct-dom/cjs/react-dom-client.development.js:14385:44 performWorkOnRootViaSchedulerTask@webpack-internal:///(pages-dir-browser)/./ node_modules/react-dom/cjs/react-dom-client.development.js:15932:24 performWorkUntilDeadline@webpack-internal:///(pages-dir-browser)/./node_modu les/scheduler/cjs/scheduler.development.js:44:56