react-query loading시와 완료시 변화 문제

const SearchInput = ()=>{
    const [keyword,setKeyword] = useState('');
    const {isLoading,isError,data,error,refetch,isSuccess} = useQuery<string[]>('keyword',()=>getKeyword(keyword),{
    enabled:false
    })
        
    const handleOnChange = debounce(async(event:React.ChangeEvent)=>{
        setKeyword((event.target as HTMLInputElement).value)
    },500)
    
    useEffect(()=>{
        if (keyword!==''){
            refetch()
        }
    },[keyword,refetch])
    
    if (isLoading) {
      return <span>Loading...</span>
    }

    if (isError) {
      return <span>Error: {(error as Error).message}</span>
    }
        
    return(
        <div>
            <input placeholder="입력해주세요" onChange={handleOnChange} autoFocus ></input>
            <div>
                {isSuccess && data.map((it)=>(
                    <Name it={it}></Name>
                ))}
            </div>
        </div>
    );
}

export default SearchInput;

이 코드를 실행하는 경우 처음에 enabled가 false로 되어있기 때문에 처음 데이터를 패치해오는경우

return(
        <div>
            <input placeholder="입력해주세요" onChange={handleOnChange} autoFocus ></input>
            <div>
                {isSuccess && data.map((it)=>(
                    <Name it={it}></Name>
                ))}
            </div>
        </div>
    );

if (isLoading) {
      return <span>Loading...</span>
    }

리턴하는 값이 이렇게 바뀌기 때문에 input이 초기화 되어 input에 들어있던 value가 사라지게 된다. 그렇기에 이러한 경우

const SearchInput = ()=>{
    const [keyword,setKeyword] = useState('');
    const {isLoading,isError,data,error,refetch,isSuccess} = useQuery<string[]>('keyword',()=>getKeyword(keyword),{
    enabled:false
    })
        
    const handleOnChange = debounce(async(event:React.ChangeEvent)=>{
        setKeyword((event.target as HTMLInputElement).value)
    },500)
    
    useEffect(()=>{
        if (keyword!==''){
            refetch()
        }
    },[keyword,refetch])
        
    return(
        <div>
            <input placeholder="입력해주세요" onChange={handleOnChange} autoFocus ></input>
            <div>
                {isLoading&&<span>Loading...</span>}
                {isError&&<span>Error: {(error as Error).message}</span>}
                {isSuccess && data.map((it)=>(
                    <Name it={it}></Name>
                ))}
            </div>
        </div>
    );
}

이런식으로 구현해준다