Hydrate getting called multiple times with Redux Toolkit and next-redux-wrapper - reactjs

Question

I am trying to add redux to Next.js. It is not working Ok
This is my reducerSlice file
import { createSlice } from '#reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';
import { AppState } from '..';
export const ProfileSlice = createSlice({
name: 'profile',
initialState: {
name: [] as any
},
reducers: {
setProfileData: (state, action) => {
state.name = [...state.name, action.payload];
}
},
extraReducers: {
[HYDRATE]: (state, action) => {
if (!action.payload.profile.name) {
return state;
}
const nextState = {
...state, // use previous state
name: [...state.name, ...action.payload.profile.name]
};
return nextState;
}
}
});
export const { setProfileData } = ProfileSlice.actions;
export const selectProfile = (state:AppState)=>state.profile;
export default ProfileSlice.reducer;
When I use server side rendering to dispatch data to the store a single value is stored okay but when i use array the hydration is called multiple times
You can see in this image Emma is logged 4 times
I don't know what to do
Here is how I used SSR in profile file
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ query }) => {
console.log('store state on the server before dispatch', store.getState());
const response = await fetch(
`https://reqres.in/api/users/${Math.floor(Math.random() * 10 + 1)}`
);
const { data } = await response.json();
const data2 = data.first_name;
store.dispatch(setProfileData(`${data.first_name}`));
return {
props: {
data2
}
};
});