This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided. In printing validation error msg

I am creating resuable form component using react form hooks and using type script. When I am trying to print validation error msgs I am getting error "This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided."

I gave 'children: React.ReactNode' to formState and useForm type, But then it is creating more issues. I think I need to define type for useForm() and I tried but failed to fix the issue.

export type Fields = {
    name?: string,
    label?: string,
    type?: string, 
    validationProps?:{required: string}
}
interface FieldsProps {
  fields: Fields[],
  onSubmit:(values:any)=>void,
}

const Form = ({fields, onSubmit}: FieldsProps) => {
    const {register, handleSubmit, formState: {errors}} =  useForm();

   const renderFields =(fields:Fields[])=>{ 
    return fields?.map((field)=>{
      let { type, name, validationProps } = field;
      switch (type) {
        case 'text':
          return (
            <div key={name}>
               <TextfieldWrapper type='text' {...register(`${name}`, validationProps)} name={name}  id={name}  {...field}/>
                <> { console.log('last N',  errors[`${name}`]?.message)}</>
                <>{errors[`${name}`]?.message && <span className='error'> {errors[`${name}`]?.message} </span>}  </> {/* Error in this line */}
            </div>
          )
          case 'email':
            return (
              <div key={name}>
                 <TextfieldWrapper type='email' {...register(`${name}`)} name={name}  id={name}  {...field}/>
                 <>{errors[`${name}`]?.message && <span className='error'> {errors[`${name}`]?.message} </span>}  </> {/* Error in this line */}
              </div>
            )
      
        default:
          return (
            <div key={name}>
               <div className='error'>Invalid Field!</div>
            </div>
          )
      }
       
      })
   }

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* <h4>{title}</h4> */}
             <> {renderFields(fields)}</>
              <button type='submit' className='btn'>Submit</button>
        </form>
    </div>
  )
}



export default Form