Hi!
Hope all is well.
I'm running into a situation in which I need both a client component & a server component inside a parent client component.

The code looks something like this:

"use client"
const Page = () => {
    const transactionId = usePathname().split('/').pop()
    if (!transactionId) {
        return (
            <div>
                <p>Transaction ID not found</p>
            </div>
        )
    }


    return (
        <div className="payment-page">
            <div className="payment-form">
                <PaymentForm>
                    <div className="product-details">
                        <PaymentPage transactionId={transactionId} />
                    </div>
                </PaymentForm>
            </div>
        </div>
    );
}


export default Page;

And PaymentForm is a form. I set it "client" for now because we intend to use hooks and other client-only related features later on.

"use client"
const PaymentForm = ({
    children,
}: {
    children: React.ReactNode
}) => (
    <>
        <form>
            <Input
                name="Bank name"
            />
            <Input
                name="Account number"
            />
            <Input
                name="Account name"
            />
            <Input name="IBAN" />
            <Button type="submit">
                Next
            </Button>
        </form>
        {children}
    </>
)

export default PaymentForm

And PaymentPage is like this:

const PaymentPage = async ({ transactionId }: { transactionId: string }) => {
    const result = await fetchTransaction(transactionId)
    const transaction = result.transaction as unknown as Transactions
    return (
          <ProductDetails transaction={transaction}/>
     )

export default PaymentPage

and finally ProductDetails is a basic server component. When trying to run it, I get two types of errors (rest in comments)