Reactjs – nextjs 14 forms, which is the better pattern

I need to create a form in nextjs, in plain react some time ago I used to manage the state of each input of the form by using an useState hook, now I have seen in the official nextjs documentation that the good practice is do things like this, where user only submit the form and you validate the inputs on the function onSubmit, import React, { useState, FormEvent } from ‘react’

export default function Page() {
  const [isLoading, setIsLoading] = useState<boolean>(false)
 
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true) // Set loading to true when the request starts
 
    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      })
 
      // Handle response if necessary
      const data = await response.json()
      // ...
    } catch (error) {
      // Handle error if necessary
      console.error(error)
    } finally {
      setIsLoading(false) // Set loading to false when the request completes
    }
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Submit'}
      </button>
    </form>
  )
}

Now I would like to have for example an input called phone number, I need to validate the content of it, I would like to have the forms green border while the inputed value is correct and red is incorrect, for do this i need a client component that uses useState right? I can’t do it with a server component for better performance, also what about error handling, what is the best practice for handling errors on each field?

I thought to make a part of the form client component and a part of the form server component for better performance.