Best Practices for Conditional Rendering with Button Click in Mixed Server and Client Components in Next.js 14

I am working on a Next.js 14 project and facing a challenge with implementing conditional rendering. My setup includes a server component that contains both server and client child components. Specifically, I have a client component, AddIngreso, which contains a button. Upon clicking this button, I want to trigger conditional rendering to display other components.

The challenge I'm facing is the limitation that having a server component as the parent doesn't allow me to use hooks like useState for managing state changes triggered by the client component. I'm seeking advice on the best way to handle this scenario. Is there a recommended approach in Next.js for managing interactions and state changes between server and client components, especially when the parent component is a server component? Should I use custom events or a different pattern?

I'm looking for insights or best practices for achieving this kind of conditional rendering with a button click in a client component within a server component context in Next.js 14. Any advice or suggestions would be greatly appreciated. Thanks in advance!

Here's the structure of my JSX code:

// Import necessary components
import AddFrequentIngreso from "./añadirFrecuenteIngreso";
import AddIngreso from "./añadirIngreso";
import FrequentIngresostabla from "./frequentIngresostablaDelMes";
import TablaIngresos from "./tablaIngresosDelMes";
const AñadirIngresoYFuente = () => {
  return (
    <div className="flex flex-col sm:flex-row w-full">
      {/* First Column */}
      <div className="flex flex-col w-full sm:w-3/4 h-[62vh] overflow-y-auto">
        <h1 className="text-2xl font-semibold text-white text-center">
          Administrar nuevos ingresos
        </h1>
        <div className="overflow-y-auto">
          <TablaIngresos maxRows={5} />
        </div>
        <AddIngreso />
      </div>
      {/* Divider */}
      <div className="w-full sm:w-2 h-2 sm:h-auto bg-gray-300 dark:bg-gray-700 rounded-full my-2 sm:my-0"></div>
      {/* Second Column */}
      <div className="flex flex-col w-full sm:w-1/4 h-[62vh] overflow-y-auto">
        <h1 className="text-2xl font-semibold text-white text-center">
          Administrar fuentes de ingreso
        </h1>
        <div className="overflow-y-auto">
          <FrequentIngresostabla maxRows={5} />
        </div>
        <AddFrequentIngreso />
      </div>
    </div>
  );
};

export default AñadirIngresoYFuente;

I was under the impression that a client component couldn't have server components as children in any capacity. However, your insights clarified that it's indeed possible to pass server components as props within a client component. This realization has been pivotal in resolving my challenge. I truly appreciate your assistance and patience in helping me understand this crucial aspect of Next.js.