Redux saga failing to get data from API - reactjs

Question

I have a react application where I have a username and password field which is then submitted to the backend(PHP) for creating and starting session. This is the code for Login.js:
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { getResult } from "./redux/FormSlice"
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
function Login() {
const [username, setUsername] = useState("");//state variable for username
const [password, setPassword] = useState("");/state variable for password
let { result } = useSelector(state => state.FormSliceReducer)//result stores whether the authentication is successful or not
const navigate = useNavigate();
//the following useEffect is for reacting to changes whether the login is successful or not
useEffect(() => {
switch (result) {
case "success": {
const url = "/main/" + username
navigate(url)
break;
}
case "Invalid password": {
alert("Invalid password")
break;
}
case "Invalid email": {
alert("Invalid email")
break;
}
}
}, [result])
const dispatch = useDispatch();
const formSubmitted = (event) => {
event.preventDefault();
dispatch(getResult({username, password}))//when I submit the form I send username and password to the particular reducer and saga.
}
return (
<div>
<h1>Welcome to form</h1>
<form onSubmit={formSubmitted} method='POST' className='form'>
<label>Username: </label>
<input type="text" name="username" value={username} onChange={(event) => setUsername(event.target.value)}/>
<label>Password: </label>
<input type="password" name='password' value={password} onChange={(event) => setPassword(event.target.value)}/>
<input type="submit" value="Submit" name='submit'/>
</form>
</div>
)
}
export default Login
Whenever I click on submit I get the following error:
Error
FormSlice.js: Since I am using redux-toolkit I use createSlice function
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
result: ""
}
const slice = createSlice({
name: "FormSlice",
initialState,
reducers: {
getResult: (state, action) => {
},
setResult: (state, action) => {
//the message from the PHP backend comes here
state.result = action.payload.result[0].message
},
}
})
export const { getResult, setResult } = slice.actions
export default slice.reducer;
FormSaga.js:
import { put, takeEvery } from "redux-saga/effects"
function* getResult1(action) {
let url = "http://localhost:8787/php/form/form.php?username=" + action.payload.username + "&password=" + action.payload.password;
let result = yield fetch(url)
result = yield result.json()
yield put({type: "FormSlice/setResult", payload: result})
}
function* authSaga() {
yield takeEvery("FormSlice/getResult", getResult1);
}
export default authSaga;
Please comment if more information is needed.