Form.js

import React, { useState } from 'react'

function Form() {
  const [firstName, setFirstName] = useState('Maija')
  const [lastName, setLastName] = useState('Mehiläinen')
  
  function handleFirstNameChange(e) {
    setFirstName(e.target.value)
  }
  
  function handleLastNameChange(e) {
    setLastName(e.target.value)
  }
  
  return (
    <div>
      <input value={firstName} onChange={handleFirstNameChange} />
      <input value={lastName} onChange={handleLastNameChange} />
    </div>
  )
}

export default Form

FormSplit.js

import React, { useState } from 'react'

// generic state for input 
function useFormInput(initVal) {
  const [value, setValue] = useState(initVal)
  const handleChange = e => setValue(e.target.value)
  return {
    value,
    onChange: handleChange
  }
}

function Form() {

  const firstName = useFormInput('Maija')
  const lastName = useFormInput('Mehiläinen')

  return (
    <div>
      <input {...firstName} />
      <input {...lastName} />
    </div>
  )
}

export default Form