Paint' cannot be used as a JSX component

Question

Its return type 'Element | undefined' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'.

the component does not give error in the function but in the route when you try to render it

 ReactDOM.createRoot(document.getElementById('root')!).render(
    <>
  <BrowserRouter>
    <Routes>
      <Route path="/Paint" element={<Paint/>} />
    </Routes>
  </BrowserRouter>
    </>
)



function Paint(){
    const [X, ChangeX]  = useState(localStorage.getItem("X") || 0)
    const [Y, ChangeY]  = useState(localStorage.getItem("Y") || 0)
    const [XYset, ChangeXYset]  = useState(Boolean(localStorage.getItem("XYset")!) || false)


if (!XYset){
return (
  <div className='App'>
    <div className='popup'>
      <h1>please choose canvas size</h1>
      
      <input placeholder="X:" value={X} type="number" className='XYinput' onChange={(e: any) => {ChangeX(e.target.value); localStorage.setItem("X", e.target.value)}}></input>
      <br></br><br></br>
      
      <input placeholder="Y:" value={Y}type="number" className='XYinput' onChange={(e: 
 any) => {ChangeY(e.target.value); localStorage.setItem("Y", e.target.value)}}></input>
      <div className='BtnDiv'><div className='DrawBtn' onClick={() => {if (X != 0 && Y 
!= 0){ChangeXYset((X) => true); localStorage.setItem("XYset", "true")}}}>Rysuj</div></div>
    </div>
  </div>
)
 }else if (XYset) {

return(


<div className='App'>
  
<canvas height={Y} width={X} className="Canvas"></canvas>
</div>

) } }