Passing the return value of a useAppSelector to a variable in React-Redux

Question

I might have missed something super obvious when refactoring my implementation of Redux in a React application, but when I'm trying to access the value of one of my slices I get thrown some errors by the Typescript Compiler about not being able to assign a (func) => string to a parameter of type string.

For context, here's my implementation:

Slice:

export const environmentSlice = createSlice({
    name: 'environment',
    initialState,
    reducers: {
        updateEnvironment: (state, action:PayloadAction<string>) => {
            state.value = action.payload
        }
    }
});

export const { updateEnvironment } = environmentSlice.actions;

export const selectEnvironment = (state: RootState) => state.environment.value;

How i've defined the interface for my environment:

// Defining type for state
interface EnvironmentState {
    value: string,
};

// define the initial state using that type
const initialState: EnvironmentState = {
    value: 'live',
}

How RootState is defined in my store:

export const store = configureStore({
    reducer: {
        loggedIn: loggedInReducer,
        environment: environmentReducer,
        token: tokenReducer,
},
})

export type RootState = ReturnType<typeof store.getState>;

How I'm trying to get the value into one of my React Components:

let environment = useAppSelector((state: RootState) => {
        return state.environment.value
    });

I've also tried following the implementation in the redux docs here but had no luck with that: https://react-redux.js.org/tutorials/typescript-quick-start#use-typed-hooks-in-components

---

When assigning this value, i'm using useAppDispatch() assigned to a variable inside of the response section of a fetch request:

fetch('/api/authenticate', requestOptions)
            .then(async response => {
                if (response.status === 200) {
                    let data = await response.json();
                    dispatch({ type: toggle });
                    dispatch({ type: updateToken, payload: data.token });

                    webHelpers.get('/api/user', 'default', 'auth', data.token, (data: any) => {
                        dispatch({ type: updateUser, payload: data.full_name })
                    });

                    // 
                    navigate('../management/staff');

Please note: The environment isn't updated upon sign-in but only once the user selects an option from a drop-down menu in the DOM. It's directly after this sign-in and navigation that the application crashes, however, as it states it cannot read the 'value' on the following:

const token = useAppSelector(state => {
    return state.token.value
});

The above is reached after the navigate('../management/staff'); is called.

---

Edit: Accidently included wrong code snippet when showing useAppSelector in use. Update to fix.

Edit2: Added in section about the dispatches that assigns these values.

Edit3: Managed to resolve the solution but not in the exact way I'd hoped so I'll leave this open. The issue appeared to be that the attempts to dispatch data via the slices I'd added to my store's reducer didn't work, having all of those methods on one sole slice resolved the issue. This isn't ideal as I'd wanted 3 separate slices to manage each of these states separately. There must be some issue in my redux store with setting these up to work independently.