Combining Server Components and Client Components in Next.JS

I am facing some issue in a Next.JS app.

This app has some server components already functionning as I expect.
Those components allow me to fetch data from a database.

Here is the code for the main component:

export default async function SentenceList({}:{}) {
	const theResult = await sentences()

	return <div>
		{
			theResult.map(item => (
				<div key={item.orderKey as string}>
					<SentenceUnit sentence={item.sentence}
												english={item.english}
												french={item.french} />
				</div>
			))
		}
	</div>
} /* End of SentenceList */

Up to this point all is fine. Problems come from now on.

I want to call the component above in a few various ways (passing it parameters). In other words it would become:

	export default async function SentenceList(
		{param}:{param: number}) {
		... work according to value of param ...
	} /* End of SentenceList */

But to allow the user to set the value of the parameter to be passed to this server component I need a client component to set interactity to get the user input. And this is where troubles come.

I have tried to set a client component (see code below) from where I could get the user input and also call my working server component. But it does not work (at least, the way I do it).

	'use client'
	.....

	export default function SentenceDisplayMng() {
		const [transType, setTransType] = useState(1)
		const [typeChecks, setTypeChecks] = useState([false,false])

		return <div>
	      <TranslatChoice
					actionFunc={(v) => setTransType(v)} 
					radChecks={typeChecks} />

	        <SentenceList />
		</div>
	} /* End of SentenceDisplayMng */

Because of the presence of useState I have to set: 'use client'

But once I do that I am told that I cannot do such a thing. Precisely I get this error message:

Unhandled Runtime Error

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

Here 'use client' has indeed been added (to the Client Component), but that was not accidental.

F.Y.I. In the code above TranslatChoice is just a component made to get the user information via radio boxes, but this is rather irrelevant to the question.

What I am trying to do is basic enough so that other people are bound to have met the same issue before me and there must be a reasonably easy solution. Am I including the Server Components inside the Client Components in a wrong manner? Or is there some better way to do?

I hope some Next.JS expert will be able to give me some good tips here.

You can't add a server component as a child to client component, at least not like this. You can pass the server component as prop to client component but the parent of client component needs to be a server component. You can read more about it in the docs Nextjs docs.