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