Javascript – react why ternary operator is not working inside jsx with context value

Please see below code ternary operator is not working in react inside jsx with value from context api

const { isSortex, isTransportLocal, setAcessLevel, isTransportOutside } = useContext(accessLevel);

//isTransportOutside is false and 
//isTransportLocal is true
return (
    <>
        <div className="R3-my-Blue-dark" style={style}>
            <PannelButtonContainer>
                {isTransportOutside ? <PannelButton buttontext="Truck Freight Outside" /> : null}
                {isTransportLocal ? <PannelButton buttontext="Workslip" /> : null}
            </PannelButtonContainer>
        </div>
    </>
);

both component are rendering while true should render and false should not