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

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:

const environment = (state: RootState) => 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