react setState is not working after pusher-js is updated?

Question

I'm trying to update state after pusher-js's event is updated. In code below even though the log message is printed after event update and show the updated status correctly, but it seems non of two lines before that are not working and no update happens. I mean both test and orderStatus state are not updated even in render function(I mean jsx codes) thanks in advance for those who help me to find out the reason.

  const [orderStatus, setOrderStatus] = useState('approved');

  let test = 'approved';


pusher.subscribe(channel).bind('order.updated', (message: any) => {
    setOrderStatus(message.status);
    test = message.status;
    // the line below is loged in console after order.updated
    console.log('socket message', message.status);
  });

  useEffect(() => {
    console.log('orderState mount', orderStatus, test);
  }, []);

  useEffect(() => {
    switch (orderState) {
      case 'pending':
        setPopup('WFP');
        break;
      case 'approved':
        navigation.navigate('OrderPage', {
          method: transferMethodType,
          type: 'Confirm',
        });
        break;
      case 'deal':
        setPopup('RAN');
        break;
      case 'segmentationSubmitted':
        navigation.navigate('AccountNumbers', { method: transferMethodType });
        break;
      default:
        setPopup(null);
    }
  }, [test, orderStatus]);