put into a function onChange , from props

Question

                <Controller
                    name="shiftDayType"
                    control={control}
                    render={({ field: { onChange, ...field } }) => (
                      <SwitchSelectors
                        {...field}
                        onChange={(e) => {
                        setSwitchActive(!switchActive)
                          return onChange(e);
                        }}
                        options={options}
                        background={'#fff'}
                        fontColor={'#8891A7'}
                      />
                    )}
                  />

i did this but something is wrong

  const handleChange = useCallback((e) => {
        setSwitchActive(!switchActive);
        return handleChange(e)
      }, [switchActive]);

               <Controller
                    name="shiftDayType"
                    control={control}
                    render={({ field: { onChange, ...field } }) => (
                      <SwitchSelectors
                        {...field}
                        onChange={handleChange}
                        options={options}
                        background={'#fff'}
                        fontColor={'#8891A7'}
                      />
                    )}
                  />

please tell me what i wrote wrong

• I have an infinite recursion (ie i are calling handleChange from itself)*