React TypeError: Object(...) is not a function

[shiro1]

I have a react app where i check if a user is logged in. If they are not logged in, they are redirected back to the login page. When the user is now logged in, i get this error

TypeError: Object(...) is not a function

  30 |   const { user: currentUser } = useSelector((state) => state.auth);

I do not understand why the user is not added to my local storage. Any advice/recommendations will be appreciated.

My code looks like this

import React from "react";
import { useSelector } from "react-redux";
import { Redirect } from "react-router-dom";

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import {Image, Item, Label} from 'semantic-ui-react'

const MyProfileSection = () => {

    const { user: currentUser } = useSelector((state) => state.auth);

    if(!currentUser) {
        return <Redirect to="/login-page" />;
    } 

    let reviewer = currentUser.is_reviewer;

    if(currentUser.role === 1) {
        let role = "Business_Owner";
    } else if(currentUser.role === "2") {
        let role = "Reviewer"
    } else if(currentUser.role === "3") {
        let role = "Admin"
    }


  return (
    <div>
         <Label as='a' color='red' size="huge" ribbon style={{marginBottom: 50}}>
          My Profile
        </Label>

        {/* <Link to={"/update-profile"}> <Button circular color='red' icon='pencil alternate' floated='right' /> </Link> */}

        <GridContainer justify="center">

            <GridItem xs={12} sm={6} md={5} lg={5}>
    
            <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' circular />
            </GridItem>

            <GridItem xs={12} sm={6} md={5} lg={5}>
     
            {
            reviewer === "True"?
                <Item.Group>

                    <Item>
                    <Item.Content>
                            <Item.Header>Full Names</Item.Header>
                            <Item.Description as='a'> {currentUser.name} </Item.Description> 
                        </Item.Content> 
                    </Item>
                                
                </Item.Group>

                :

                <Item.Group>

                    <Item>
                    <Item.Content>
                            <Item.Header>Full Names</Item.Header>
                            <Item.Description as='a'> {currentUser.name} </Item.Description> 
                        </Item.Content> 
                    </Item>

                
                </Item.Group>

            }

            
            </GridItem>

        </GridContainer>    
    </div>
  );
}

export default MyProfileSection;

[Sky020]

@shiro1

const { user: currentUser } =

Hey there,

What happens if you do not use destructuring?

const user = useSelector(...);
comst currentUser = user.user; // Use better names than me