I am trying to populate the name field dynamically based on whatever employeeid is selected but i seem to have missed a step (or a couple)

when i console log employeeIDOptions, I can see the firstname and lastname but the field still doesn’t get automatically updated

Here’s the related code
I’d appreciate your contributions

 // Fetching Employee ID
    const { data: employeeID, error: employeeIDError } = useGetRequest(
        "/EmployeeRecord/all"
    ) as { data: any; error: any };

    console.log("Fetched Employee ID", employeeID);

    const employeeIDOptions = employeeID?.map((type: any) => ({
        label: type.nextOfKinResponse.employeeID,
        value: type.id,
        firstName: type.firstName,
        lastName: type.lastName,
    }));
    console.log("employeeIDOptions", employeeIDOptions);

    useEffect(() => {
        const selectedEmployee = employeeIDOptions?.find(
            (option: any) => option.value === systemUsersPayload.employeeId
        );
        if (selectedEmployee) {
            setSystemUsersPayload((prev) => ({
                ...prev,
                employeeName: `${selectedEmployee.firstName} ${selectedEmployee.lastName}`,
            }));
        }
    }, [systemUsersPayload.employeeId, employeeIDOptions])

//This is where the ID Options are used as dropdown

<InputLabel
                        label="Employee ID"
                        id="employee-id"
                        type="select"
                        placeholder="AB123456"
                        options={employeeIDOptions}
                        value={systemUsersPayload.employeeId}
                        onChange={(e) => {
                            setSystemUsersPayload((prev) => ({
                                ...prev,
                                employeeId: e.target.value,
                            }));
                        }}
                    />
//When I select an ID i want this name field to update to the firstname and lastname on the id option

<InputLabel
                        label="Employee Name"
                        id="employee-name"
                        type="text"
                        placeholder="John Praise Anoki"
                        value={systemUsersPayload.employeeName}
                        onChange={(e) => {
                            setSystemUsersPayload((prev) => ({
                                ...prev,
                                employeeName: e.target.value,
                            }));
                        }}
                    />