Issues receiving parameters in High Order Components in React

I want to adjust a demo provided by some tutorial about React Design Patterns, subject: Higher Order Component.

In the code the argument '2' for an userId is hardcoded inside of the component and can be found in the last line of the component UserInfoForm.

My question: How can I use a parameter here instead, that I can send to the withEditableUser HOC when calling it like this?

withEditableUser(UserInfoForm, 4);

Any help, tips, additional sources to learn this would be highly appreciated.

Here's the HOC with the hardcoded argument:

import {withEditableUser} from './withEditableUser';

export const UserInfoForm  = withEditableUser(({ user, onChangeUser, onSaveUser, onResetUser }) => {
    const { name, email, username } = user || {};

    console.log(user)

    return user ? (
        <>
        <label>
            Name:
            <input value={name} onChange={e => onChangeUser({ name: e.target.value })} />
        </label>
        <label>
            Email:
            <input value={email} onChange={e => onChangeUser({ email: e.target.value })} />
        </label>
        <label>
            Username:
            <input value={username} onChange={e => onChangeUser({ username: e.target.value })} />
        </label>
        <button onClick={onResetUser}>Reset</button>
        <button onClick={onSaveUser}>Save Changes</button>
        </>
    ) : <p>Loading...</p>;
}
, '2');