Как написать одну функцию для 4 разных компонентов?
interface IFormData {
  firstName: string;
  lastName: string;
}
const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});
  
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});
<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />
Как добавить два других свойства - думаю, сами догадаетесь.
// хелперы
const makeCustomTextFieldWithState = (): [string, ReactElement] => {
  const [value, setValue] = useState<string>('');
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
    setValue(event.target.value);
  return [value, <CustomTextField onChange={onChange} />];
};

const makeManyCustomTextFieldWithState = (count: number): [string[], ReactElement[]] =>
  Array(count).fill(0).reduce(([values, elements]) => {
    const [value, element] = makeCustomTextFieldWithState();
    return [
      [...values, value],
      [...elements, element],
    ];
  }, [[], []]);

// в компоненте
const [[dept, login, firstName, lastName], elements] = makeManyCustomTextFieldWithState(4);
<>elements</>