null state in react on page refresh

I have a created a auth reducer

import * as actionType from '../constants/actionTypes';

const authReducer = (state = { authData: null }, action) => {
  switch (action.type) {
    case actionType.AUTH:
      localStorage.setItem('profile', JSON.stringify({ ...action?.data }));
      return { ...state, authData: action.data, loading: false, errors: null };

    case actionType.SET_USER:
      return { ...state, authData: action.data, loading: false, errors: null };

    case actionType.LOGOUT:
      localStorage.clear();
      return { ...state, authData: null, loading: false, errors: null };
    default:
      return state;
  }
};

export default authReducer;

For which I have created a set of actions

import { AUTH,LOGOUT } from '../constants/actionTypes';
import * as api from '../api/index.js';

export const signin = (formData, router) => async (dispatch) => {
  try {

    console.log(formData);
    const { data } = await api.signIn(formData);

    dispatch({ type: AUTH, data });
    console.log(JSON.parse(localStorage.getItem('profile')));
    router.push('/');
  } catch (error) {
    console.log(error);
  }
};

export const signup = (formData, router) => async (dispatch) => {
  try {
    console.log(formData);
    const { data } = await api.signUp(formData);
    dispatch({ type: AUTH, data });

    router.push('/');
  } catch (error) {
    console.log(error);
  }
};


export const signout = (router) => async(dispatch) => {
  try {
    dispatch({ type: LOGOUT });
    localStorage.clear()
    router.push('/');
  } catch (error) {
    console.log(error);
  }
}

My main app.js

export default function App() {

  const user = useSelector((state) => state.auth)
  const currUser = user?.authData?.result;
  const classes = useStyles();
  return (
    <Box sx={{ display: 'flex' }}>
      <PassPropsToNormalComponents currUser={currUser}>
        <Minidrawer/>
        <Navigation/>
      </PassPropsToNormalComponents>
      
      </Box>
  );
}

The issue is with this above approach,I am getting logged in & auth reducer is getting filled with user data as expected and the application works fine but when I refresh app auth reducer is getting reset to null

This is what I tried,I created an extra reducer & action which sets user data into auth & calls it in App.js

new app.js

export default function App() {
  const dispatch = useDispatch();
  const location = useLocation();

  React.useEffect(() => {
    const localUserData = JSON.parse(localStorage.getItem('profile'))
    dispatch(setCurrentUser(localUserData))
    console.log(JSON.parse(localStorage.getItem('profile')));
  },[location])


  const user = useSelector((state) => state.auth)
  const currUser = user?.authData?.result;
  const classes = useStyles();
  return (
    <Box sx={{ display: 'flex' }}>
      <PassPropsToNormalComponents currUser={currUser}>
        <Minidrawer/>
        <Navigation/>
      </PassPropsToNormalComponents>
      
      </Box>
  );
}

new action

export const setCurrentUser = (data) => async(dispatch) => {
  try {
    console.log("ssssssssss");
    dispatch({ type: SET_USER, payload:data });
  } catch (error) {
    console.log(error);
  }
}

new extra reducer

case actionType.SET_USER:
      return { ...state, authData: action.data, loading: false, errors: null };

Using this approach nothing getting worked,login itself not working,auth in store is always getting null