Unable to dispatch action by using saga-toolkit and redux-toolkit together - reactjs

Question

I am tried to use saga-toolkit package to create saga action but getting some error while dispatching, although I went to official documentation of saga-toolkit npm package but something is missing over there i think and I am not able to figure out what going wrong. This is official documentation link https://npm.io/package/saga-toolkit
And I wanted to pass some argument while dispatching the action but getting error in console like
"Actions must be plain objects. Use custom middleware for async actions."
saga-toolkit provide createSagaAction which is resposibe for creating saga action but I am still get the above during dispatching
dataSlice.js
import { createSlice } from "#reduxjs/toolkit";
import { createSagaAction } from "saga-toolkit";
export const fetchData = createSagaAction("data/fetchData");
const dataSlice = createSlice({
name: "data",
initialState: {
data: [],
error: null,
loading: false,
},
extraReducers: {
[fetchData.pending]: (state) => {
state.loading = true;
},
[fetchData.fulfilled]: (state, action) => {
state.loading = false;
state.data = action.payload;
},
[fetchData.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
},
});
export default dataSlice.reducer;
dataSagas.js
import { put, call, fork } from "redux-saga/effects";
import { takeLatestAsync, putAsync } from "saga-toolkit";
import * as actions from "./feature/dataSlice";
import { getDataApi } from "./api";
function* onLoadData({payload}) {
const result = yield call(getDataApi, payload);
return result;
}
function* onLoadData() {
yield takeLatestAsync(actions.fetchData.type, onLoadDataAsync);
}
export const dataSagas = [fork(onLoadData)];
rootSaga.js
import { all } from "redux-saga/effects";
import { dataSagas } from "./dataSagas";
export default function* rootSaga() {
yield all([...dataSagas]);
}
store.js
import { configureStore } from "#reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import DataReducer from "./feature/dataSlice";
import rootSaga from "./rootSaga";
const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
reducer: {
data: DataReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({ thunk: false }).concat(sagaMiddleware),
});
sagaMiddleware.run(rootSaga);
export default store;
App.js
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useDispatch } from "react-redux";
import { fetchData } from "./redux/feature/dataSlice";
function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchData());
}, []);
return (
<div className="App">
<h2>Calling API using Saga-toolkit</h2>
</div>
);
}
export default App;