React Hooks fetch post request memory leak - reactjs

Question

I'm trying to post a login form to my API after a validation callback (useForm) and set the response data in my authentication context (dispatch({ type: "SET_AUTH", payload: responseJson }). It works fine but I still get a memory leak warning. I've been working on this problem for a few days and i think i'm going crazy. I tried using ref and AbortController but can't fix this warning. Thanks for your help !
const Signin: React.FC = () => {
const { dispatch } = useAuthContext()
const isMountedRef = useRef<any>(null)
const defaultValue = {
email: '',
password: ''
}
const signinDefaultState = {
loading: false,
error: undefined,
data: undefined
}
type SigninState<T> = {
loading: boolean,
error?: string,
data?: T
}
const [signinState, signinSetState] = useState<SigninState<any>>(signinDefaultState)
const [validFormData, setValidFormData] = useState(defaultValue)
const validFormCallback = () => {
setValidFormData(values)
}
const { values, errors, handleChange, handleKeyup, handleSubmit } = useForm(
defaultValue,
validFormCallback,
validate,
)
useEffect(() => {
const abortController = new AbortController()
isMountedRef.current = true
if (validFormData.email !== "") {
const postSignin = async () => {
const options = {
...authJsonHeader,
method: "POST",
body: JSON.stringify(validFormData),
} as any
try {
signinSetState({ ...signinState, loading: true })
const response = await fetch(`${process.env.REACT_APP_API_HOST}/signin`, { ...options, signal: abortController.signal })
const responseJson = await response.json()
if (!response.ok) {
throw responseJson
}
if (isMountedRef.current) {
dispatch({ type: "SET_AUTH", payload: responseJson })
}
//signinSetState({ ...signinState, data: responseJson as string, loading: false })
} catch (err: any) {
console.log(err)
if (!abortController.signal.aborted) {
signinSetState({ ...signinState, error: err as string, loading: false })
}
}
}
postSignin()
}
return () => {
isMountedRef.current = false
abortController.abort()
}
}, [validFormData])
return (
<form>
<H3>Connecte-toi pour retrouver toutes tes popotes favorites et découvrir celles de tes proches</H3>
<div>
<InputField
id="email"
label="Email"
type="email"
name="email"
value={values.email}
onKeyUp={handleKeyup}
onChange={handleChange}
error={(errors as any).email}
/>
</div>
<div>
<InputField
id="password"
label="Password"
type="password"
name="password"
value={values.password}
onKeyUp={handleKeyup}
onChange={handleChange}
error={(errors as any).password}
/>
</div>
<div style={{ marginTop: "20px" }}>
<Button type="primary" onClick={handleSubmit}>Sign In</Button>
{signinState.error && <InfoBlockStyled>{signinState.error as any}</InfoBlockStyled>}
{signinState.loading && <LoadingInline />}
</div>
</form>
)
}
const InfoBlockStyled = styled(InfoBlock)(({ theme }) => ({
marginTop: theme.spacer.m,
}))
export default Signin