Front End Development Libraries Projects - Build a 25 + 5 Clock

Why is my code not rendering please help, as soon as i enter the reactusestate codelines it stops rendering. please explain why that is and how to fix it

const App=()=>{
  const [timeLeft, setTimeLeft]=React.useState(5);
  const [SessionLengthest, setSessionLengthest]=React.useState(5);
  return(<div id="container">

const Happy=()=><div id="title">25+5 clock</div> 

const Break=()=>{return (<div id="break-label">Break Length
    <strong id="break-length"> {BreakLengthest} </strong>
    <i id="break-increment" onClick={handlebreakupchange} className="fas fa-arrow-up"> </i> 
    <i id="break-decrement" onClick={handlebreakdownchange} className="fas fa-arrow-down"> </i> </div>)}

const Session=()=>{return (<div id="session-label">Session Length
    <strong id="session-length"> {SessionLengthest} </strong>
    <i id="session-increment" onClick={handlesessionupchange} className="fas fa-arrow-up"> </i>  
    <i id="session-decrement" onClick={handlesessiondownchange} className="fas fa-arrow-down"> </i></div>)}

const Timer=()=>{return (<div id="timer"> {SessionOrBreak} 
    <strong> {timeLeft}</strong> 
    <i id="start_stop" onClick={handlethisplay} className="fas fa-play girl"> </i> 
    <i id="start_stop" onClick={handlethispause} className="fas fa-pause hurl"> </i> 
    <i id="reset" onClick={handlethisredo} className="fas fa-redo"> </i> </div>)}

const SessionOrBreak=()=>{return null}
const BreakLengthest=()=>{return null}
const SessionLengthest=()=>{return null}

const handlethisredo=(event)=>{return null}
const handlethispause=(event)=>{return null}
const handlethisplay=(event)=>{return null}
const handlesessiondownchange=(event)=>{return null}
const handlesessionupchange=(event)=>{return null}
const handlebreakdownchange=(event)=>{return null}
const handlebreakupchange=(event)=>{return null}


User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a 25 + 5 Clock

What platform are you coding this on?

Can we see the line where you import react?

Any console messages / errors?

im using codepen, so the react, reactDOM and babel are from the settings and not really import; the only console message is

Uncaught ReferenceError: timeLeft is not defined
at Timer (pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:25:44)
at of (react-dom.production.min.js:109:301)
at Rk (react-dom.production.min.js:250:214)
at Si (react-dom.production.min.js:195:185)
at Pk (react-dom.production.min.js:195:116)
at Nd (react-dom.production.min.js:194:492)
at Mi (react-dom.production.min.js:189:179)
at db (react-dom.production.min.js:79:182)
at zb (react-dom.production.min.js:190:156)
at $k (react-dom.production.min.js:213:125)
Timer @ pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:25
of @ react-dom.production.min.js:109
Rk @ react-dom.production.min.js:250

Si @ react-dom.production.min.js:195
Pk @ react-dom.production.min.js:195
Nd @ react-dom.production.min.js:194
Mi @ react-dom.production.min.js:189
db @ react-dom.production.min.js:79
zb @ react-dom.production.min.js:190
$k @ react-dom.production.min.js:213
Wd @ react-dom.production.min.js:213
Q.render @ react-dom.production.min.js:266
(anonymous) @ pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:49

im not sure whats going on honestly. Didnt i define it already in the const?

Can you show a screenshot of the settings in codepen?

I had a problem like this and I needed to use a different address to access react. It looks like I had these:

Is that the same, and same versions, as you have?

they are,
this is my codepen link, so you can check the settings and the code more easily