react-idle-timer: Dynamic timeout value on useIdleTimer

Before begin, thank you for making a awesome program.

I want to use this module in my project, but I have a problem. Module version is 5.0.0-rc.16

This is common steps in my program.

1. When my app is started, do not start idle timer automatically.
2. User login user’s account, then start idle timer
3. Mouse event occur (mouse move), do not fall into idle state.
4. If the mouse does not move for a specific time(timeout), it falls into a certain state and show idle lock page.
5. User can release this idle lock using user’s account information.

This sequence works fine. But I change timeout value when app is running, always first timeout is available.

my code

  // Timeout state, initial timeout is 1min
  const [timeout, setTimeout] = useState(1);

  // On Idle
  const onIdle = () => {
    console.log('Idle!!!!');

    batch(() => {
      // Show Idle modal
      dispatch(
        actions.modalActions.setIdleLockDialogStatus({ id: 'IdleLock' }),
      );
    });
  };

  // Action
  const onAction = () => {
    console.log('Mouse move!');
  };

  // idleLockTime is redux item, using useSelector
  const { start, pause } = useIdleTimer({
    timeout: 1000 * 60 * timeout,
    onIdle,
    onAction,
    startOnMount: false,  // before logged in, do not start idle timer
    startManually: true,
    stopOnIdle: true,
  });

  // idleLockTime is redux state variable
  useEffect(() => {
    if (authenticated) {
      // User success to login, start timer
      console.log('Start idle timer');
      console.log(`Idle timeout: ${idleLockTime}`);
      setTimeout(idleLockTime);
      start();
    } else {
      // User logged out, stop timer
      console.log('Stop idle timer');
      pause();
    }
  }, [authenticated, idleLockTime]);

This code always fall idle state after 1 min

What’s the problem in my code? Thank you