TabItem with icon causes Internal Server Error

[paulflew]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. Create a Server Component containing
2. Test, this should render successfully
3. Add an icon, e.g. 'icon={MdHistory}' using import { MdHistory } from 'react-icons/md'

Current behavior

Rendering gives an Internal Server Error: 'Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. <... title="test" icon={function MdHistory}>'

Expected behavior

Page should be rendered successfully

[SutuSebastian]

U have to use the "use client" directive in order to pass functions/components down the tree.

RSC can only accept React.ReactNode aka children as props, because JSX can be serializable.

[paulflew]

A couple of further notes:

1) Placing directly into the SSR page yields a correctly rendered icon, so its not a problem with the icon itself.

2) A workaround is to indeed wrap the components to explicitly make them client-side, e.g. adding an extra file as icons.tsx:

'use client'

import { MdHistory } from 'react-icons/md'

export { MdHistory }

This renders correctly.