Meteor.userId() only showing updated component when refreshed after logging out

Hi ,

I have a page where it will show a different component based on if the user if logged in or out.

In the render area I have:

    var layout;
    if (Meteor.userId()) {
        layout = <BoxSignedIn />;
    } else {
        layout = <BoxSignedOut />;
    }

     return (   

                layout                               
            ) 
    }

Now this does work if I sign out and refresh the app but will not work if I just sign out and do not refresh.

Here is the code for the signed in component:

import React from 'react';
import ReactDOM from 'react-dom';

export default class BoxSignedIn extends React.Component{

	constructor(){
     super();	
    }
    
    render(){	
     return (   
                       <div>signed in </div>
                                            
            ) 
    }
}

Hi all just wondering if anyone has come across this issue?
Is this normal or is it something that should not happen?
Thanks!