인풋 글자 입력하면 왜 하얀화면이 나오는지 모르겠습니다.

import { useEffect } from "react";
import { useParams } from "react-router-dom";
import styled from 'styled-components'
import { useState } from "react";
// let YellowBtn = styled.button`
// background : ${props => props.bg};
// color : ${props => props.bg == 'blue' ? 'white' : 'black'};
// padding : 10px;
// `

/* eslint-disable jsx-a11y/alt-text */
function Detail(props) {

//useEffect 쓰는 이유 
//먼저 useEffect안에 있는 코드는 html렌더링 후에 동작

let [count , setCount] = useState(0)
let [ alert, setAlert ] = useState(true);
let [ num , setNum] = useState('')

useEffect(()=>{
let timer = setTimeout(()=>{ setAlert(false) }, 2000);
console.log(2)
return ()=>{
console.log(1)
clearTimeout(timer)
 }
 },[]);

// useEffect(()=>{}) 1. 재랜더링마다 코드실행하고 싶으면
// useEffect(()=>{}, []) 2.mount시 1회 코드실행하고 싶으면
// useEffect(()=>{
// return () =>{ 3.unmount시 1회 코드실행하고 싶으면

// }
// },[])

useEffect(()=>{
if (isNaN(num) === true){
alert('그러지마세요')
 }
 }, [num])

let {id}=useParams();
let product = props.shoes.find(function(x){
return x.id == id
});

return (
<div className="container">
{
alert === true
 ? (<div className="alert alert-warning">
<p>2초 이내 구매시 할인</p>
</div>)
 : null
}
{count}
{/* <YellowBtn bg="blue">버튼</YellowBtn> */}
<button onClick={()=>{ setCount(count+1) }}>버튼</button>
 
<div className="row">
<div className="col-md-6">
<img src="">
</div>
<div className="col-md-6">
<input onChange={(e) => setNum(e.target.value)}></input>
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{product.content}</p>
<p>{product.price}원</p>
<button className="btn btn-danger">주문하기</button>
 
</div>
</div>
</div>
 
 )
}

export default Detail;