React component will not receive props passed to it. When rendered with a logical operator

Question

I have this component that will not receive any props I pass into if I have a logical op with it. I tried rendering it without the conditional and it works fine but once I add it. The component just will not receive the props. any advice? I also don't receive any errors from the compiler

return (
  <>

    {/* progress bar */}
    <ProgressBar percent={percent} />

    {/* {this component will have the props it received} */}
    {<SelectServices display={"any value here"}/>}  

    {/* display booking ui */}

    {/* this component won't */}
    {page === 1 && <SelectServices display={"any value here goes undefined"}/>}
    {page === 2 && <SelectServices />}
    {page === 3 && <SelectServices />}
    {page === 4 && <SelectServices />}
    {page === 5 && <SelectServices />}

  </>
);

Answer 1

there's nothing wrong in the approach you are taking. As you are conditionally rendering lot of SelectServices component, have you given the console snapshot for the one with props or is it one of the others? Do you mind posting a codepen line to your problem. Thanks!