Why my react component is unmounted after fetch error - reactjs

Question

I everyone. I try to post simple login form with a custom fetch hook. The login works fine if I authenticate well at the first time. But in error case if I try to revalidate the form the component seems to be unmounted (hooks clean up function is called) and i can't refetch my api. Why this component is unmounted i don't understand ? Thanks for your help
signin.ts (the code has been simplified)
import React, { useState } from 'react'
import useFetch from '../shared/hooks/useFetch'
const Signin: React.FunctionComponent = () => {
const [postData, setPostData] = useState({
url: "",
options: {}
})
type ResponseT = {
id: string,
firstname: string,
lastname: string,
roles: string[],
accessToken: string
} & string
const { data, error } = useFetch<ResponseT>(postData.url, postData.options)
const handleSubmit = (e: any) => {
if (e) e.preventDefault()
setPostData({
url: `${process.env.REACT_APP_API_HOST}/signin`,
options: {
method: "POST",
body: JSON.stringify({
email: "testt#test.fr",
password: "bla"
})
}
})
}
return (
<form>
<div>
<div className="form-group">
<button onClick={handleSubmit} className="btn btn-primary btn-block">Sign In</button>
{error && <p>{error}</p>}
{data === '' && <p style={{ height: '100px', backgroundColor: 'red' }}>Loading...</p>}
</div>
</div>
</form>
)
}
export default Signin
useFetch.ts
import { useEffect, useReducer, useRef } from 'react'
interface State<T> {
data?: T
error?: Error
}
type Cache<T> = { [url: string]: T }
type Action<T> =
| { type: 'loading' }
| { type: 'fetched'; payload: T }
| { type: 'error'; payload: Error }
function useNiceFetch<T = unknown>(url?: string, options?: RequestInit): State<T> {
const cache = useRef<Cache<T>>({})
const cancelRequest = useRef<boolean>(false)
const initialState: State<T> = {
error: undefined,
data: undefined,
}
const fetchReducer = (state: State<T>, action: Action<T>): State<T | any> => {
switch (action.type) {
case 'loading':
return { ...initialState, data: '' }
case 'fetched':
return { ...initialState, data: action.payload }
case 'error':
return { ...initialState, error: action.payload }
default:
return state
}
}
const [state, dispatch] = useReducer(fetchReducer, initialState)
useEffect(() => {
if (!url) return
const fetchData = async () => {
if (cancelRequest.current) return
dispatch({ type: 'loading' })
if (cache.current[url]) {
dispatch({ type: 'fetched', payload: cache.current[url] })
return
}
try {
const response = await fetch(url, options) as any
const responseJson = await response.json()
if (!response.ok) {
throw responseJson
}
cache.current[url] = responseJson as T
dispatch({ type: 'fetched', payload: responseJson })
} catch (error) {
if (cancelRequest.current) return
dispatch({ type: 'error', payload: error as Error })
}
}
fetchData()
return () => {
cancelRequest.current = true
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [url, options])
return state
}
export default useFetch