CreateProspect composed from UserForm

createProspect.tsx

import { Contact, UserForm } from '../user-form/userForm';
import React, {FC, useState} from 'react';

export const CreateProspect: FC = () => {
    const [user, setUser] = useState<Contact>({
        name: '',
        email: '',
        phoneNumber: '',
        referredBy: ''
      });
    
    const setValue = (property: keyof Contact) =>
        (e: React.ChangeEvent<HTMLInputElement>) =>
          setUser((user) => ({ ...user, [property]: e.target.value }));

    return (
        <UserForm user={user} setUser={setValue}>
            <label>Referred By</label>
            <input value={user.referredBy} onChange={setValue('referredBy')} />
        </UserForm>
    )
}

createTeamMember.tsx

import React, {FC, useState} from 'react';
import { Contact, UserForm } from '../user-form/userForm';
import { teamService } from './services';

import styles from './createUser.module.css';

export const CreateTeamMember: FC = () => {
    const [user, setUser] = useState<Contact>({
        name: '',
        email: '',
        phoneNumber: '',
        role: ''
      });

    const setValue = (property: keyof Contact) =>
        (e: React.ChangeEvent<HTMLInputElement>) =>
            setUser((user) => ({ ...user, [property]: e.target.value }));

    const handleSubmit = () => {
        teamService.syncAndSubmit(user);
    }

    return (
        <UserForm user={user} setUser={setValue} className={styles.create__team__member}>
            <label>Role</label>
            <input value={user.role} onChange={setValue('role')} />
            <button value={user.role} onClick={handleSubmit} >Submit</button>
        </UserForm>
    )
}