Entanglement Example with Context Flag :(

createUser.tsx

import React, { FC } from 'react';

import styles from './createUser.module.css';
import { useParams } from 'react-router-dom'

export interface Contact {
    name: string,
    email: string,
    phoneNumber: string,
    referredBy?: string,
}

interface Props {
    user: Contact;
    setUser: (property: keyof Contact) => (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export const CreateUser: FC<Props> = ({ user, setUser }) => {
    const { page } = useParams<{ page: string }>();
    const isProspect = page === 'prospect';

    return (
        <form className={styles.create__user}>
            <label>Name</label>
            <input value={user.name} onChange={setUser('name')} />
            <label>Email</label>
            <input value={user.email} onChange={setUser('email')} />
            <label>Phone Number</label>
            <input value={user.phoneNumber} onChange={setUser('phoneNumber')} />
            {
                isProspect &&
                <>
                    <label>Referred By</label>
                    <input value={user.referredBy} onChange={setUser('referredBy')} />
                </>
            }
        </form>
    )
};