The only change, that you need to make is: remove the use client on top. Then it's a server component.

I guess you still want to know, how to resolve the errors, that would be thrown from for example the useState or the radio buttons you mentioned. You have 2 options: Either find a alternative to be able to use them serverside or capsule the specific parts to client components (the parts, that need interactivity).

Not a 100% sure what you are asking.
Do you want to stream the Forms ( SingleForm, CouplesForm and BusinesssForm) in from the server?

If yes you could do something like
On the Server

export default function ProfileCreationServer() {
  // do server stuff
  return (
    <ProfileCreation
      form1={
        <div>
          <h3>Single Profile</h3>
          <label>
            Single Name:
            <input type="text" name="singleName" />
          </label>
          <br />
          <label>
            Contact Person:
            <input type="text" name="contactPerson" />
          </label>
          <br />
          <label>
            Single Email:
            <input type="email" name="singleEmail" />
          </label>
        </div>
      }
      form2={
        <div>
          <h3>Couple Profile</h3>
          <label>
            Couple Name:
            <input type="text" name="coupleName" />
          </label>
          <br />
          <label>
            Contact Person:
            <input type="text" name="contactPerson" />
          </label>
          <br />
          <label>
            Couple Email:
            <input type="email" name="coupleEmail" />
          </label>
        </div>
      }
      form3={
        <div>
          <h3>Business Profile</h3>
          <label>
            Business Name:
            <input type="text" name="businessName" />
          </label>
          <br />
          <label>
            Contact Person:
            <input type="text" name="contactPerson" />
          </label>
          <br />
          <label>
            Business Email:
            <input type="email" name="businessEmail" />
          </label>
        </div>
      }
    />
  )
}

And on the client

"use client"

import { type ReactNode, useState } from "react"

type ProfileCreationProps = {
  form1: ReactNode
  form2: ReactNode
  form3: ReactNode
}

export default function ProfileCreation({
  form1,
  form2,
  form3,
}: ProfileCreationProps) {
  const [profileType, setProfileType] = useState("single")

  const handleProfileTypeChange = (event: any) => {
    setProfileType(event.target.value)
  }

  return (
    <div>
      <h2>Create Profile</h2>
      <div>
        <label>
          <input
            type="radio"
            value="single"
            checked={profileType === "single"}
            onChange={handleProfileTypeChange}
          />
          Single
        </label>
        <label>
          <input
            type="radio"
            value="couple"
            checked={profileType === "couple"}
            onChange={handleProfileTypeChange}
          />
          Couple
        </label>
        <label>
          <input
            type="radio"
            value="business"
            checked={profileType === "business"}
            onChange={handleProfileTypeChange}
          />
          Business
        </label>
      </div>
      {profileType === "single" && form1}
      {profileType === "couple" && form2}
      {profileType === "business" && form3}
    </div>
  )
}

based on user selection I want to render different forms. I know that user interection are done in client side but looking for some optimized way to maybe not make the whole "create profile" route client side

So can your 3 Forms be on the server or no?
SingleForm, CouplesForm and BusinesssForm

Do they have interactivity (useState, handlers) as well?

All three forms can be on server side. I will get the data in the fields and then use server action to send the data to the database

well in that case i posted you code on how to do the forms serverside and the rest (switching between them with radio buttons) on the client

but according to my understanding if I use client side then child components (in this case form) will automatically convert to client side components

will check the code

Yes please check the code.
Your code will make the Forms ( e.g. <SingleForm>) a client component
My code will not make the Forms client components

can you please explain this code I don't understand how you passing forms as props

Yikes I need to be more focused

Thanks