react-hook-form onSubmit is not working after applying redux-persist - redux-toolkit

Question

I'm making wizard form with react-hook-form and redux tookit.
And now I'm trying to apply redux-persist to keep the form's values after refreshing or clicking to go back.
But handleSubmit is not working after I set redux-toolkit.
There's no error in console, so I'd like to know what is wrong.
Here are my codes.
store.js
import { configureStore } from '#reduxjs/toolkit';
import { formReducer } from './features/formSlice';
import storageSession from 'redux-persist/lib/storage/session';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
const persistConfig = {
key: 'root',
storage: storageSession,
};
const persistedReducer = persistReducer(persistConfig, formReducer);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk],
});
export const persistor = persistStore(store);
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n';
import { store, persistor } from './store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root'),
);
programName.js (step 1 in my wizard form)
function ProgramName() {
const programName = useSelector((state) => state.programName);
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
defaultValues: programName,
});
const dispatch = useDispatch();
const history = useHistory();
const handleOnSubmit = (data) => {
console.log(Object.values(data));
dispatch(submitStep1(Object.values(data)));
history.push('./step2');
};
return (
<form onSubmit={handleSubmit(handleOnSubmit)}>
<Text size={30} weight={800} mb={10}>
Step 1. Program name
</Text>
<label htmlFor="programName">
Program Name
<input
name="programName"
{...register('programName', { required: 'fill out!' })}
/>
<ErrorMessage errors={errors} name="programName" as="p" />
</label>
<Button type="submit">next</Button>
</form>
);
}
export default ProgramName;
formSlice.js
import { createSlice } from '#reduxjs/toolkit';
export const formSlice = createSlice({
name: 'form',
initialState: {
programName: '',
targetName: '',
category: [],
tags: [],
targetLocation: '',
rewardType: '',
rewardAmount: '',
},
reducers: {
submitStep1: (state, action) => {
state.programName = action.payload;
}, //etc..
export const formReducer = formSlice.reducer;
export const {
submitStep1,
submitStep2,
submitStep3,
submitStep4,
submitStep5,
submitStep6,
submitStep7,
submitStep8,
} = formSlice.actions;
more detail example
when I click the next, handleSubmit is not working and the error message is showing underneath though I fill the input, so I cannot be into step 2 form.