React conditionals

App.jsx:

import Component from "./components/Component"

const App=()=>{
    return (
    <>
        <Component/>
    </>
  );

}
export default App;

Component.jsx:

import TurnOff from "./TurnOff";
import TurnOn from "./TurnOn";

const Component = ()=>{

let on = false;

const click = (on_state)=>{
    if (!on_state){
        <TurnOff/>
    }
    else{
        <TurnOn/>
    }
    on_state = !on_state;
}
    return(
        <>
            <button onClick={(on)=>{click(on)}}>Push me</button>            
        </>
    );
}

export default Component;

TurnOff.jsx

const TurnOff = ()=>{
    return(
        <>
            <p style="background-color:red;color:white;">It's turn off!</p>      
        </>
    );
}
export default TurnOff;

TurnOn.jsx:

const TurnOn = ()=>{
    return(
        <>
            <p style="background-color:green;color:white;">It's turn on!</p>      
        </>
    );
}
export default TurnOn;