Rendered more hooks than during the previous render. react

when i try using this function i got error :Rendered more hooks than during the previous render.

export const employeesExtraHours = (
  employees: any[],
  holidays: any[],
  rules: any[],
  types: any[],
  startDate: string,
  endDate: string
): any[] => {
  return employees.map((employee) => {
    const request = useFetchTimeOffRequests(
      employee.bambooHREmployeeId,
      startDate,
      endDate
    );

    const extraHoursData = ExtraHoursData(
      employee.bambooHREmployeeId,
      employee.displayName,
      startDate,
      endDate,
      holidays,
      rules,
      types,
      request
    );

    // You can store the extraHoursData in the employee object
    return {
      ...employee,
      extraHoursData,
    };
  });
};

i have to use the hook for every employee

new array list of employee

Here you have 2 mistakes

• Using hook inside regular function. employeesExtraHours is just a function and you are calling useFetchTimeOffRequests inside it. Hooks should be used only inside components and custom hooks
• Using hook inside a loop. The number of hook calls should not change between renders. If you can't guarantee that, you should not call hooks inside loops.

What you can do is to move the hook call inside a component that you use to render for each employee. Or if useFetchTimeOffRequests is not using any hooks inside it, you can transform it into regular function, then you will be able to call it there

It is all explained in the React docs