Inertia shared data not passed to the frontend - Inertia with React

I have an application that has team management. I would like to display the teams in the user profile dropdown but I keep getting the error in the console: Uncaught TypeError: Cannot read properties of undefined (reading 'all') when I try to map through the array. This is what I have in my HandleInertiaRequests middleware:

public function share(Request $request)
    {
        return array_merge(parent::share($request), [
           //* showing teams
            'teams' => [
                'all' => Team::orderByDesc('created_at')->get(),
                'current' => auth()->user()->current_team ?? null,
            ],
           
        ]);
    }

So, in my frontend, I access it as a prop in the export function UserSettings ({ teams }) and I loop through with teams.all.map(), I already have a team registered in my teams table and a team attached to the authenticated user in my team_user pivot table. I don't know what I am doing wrong, yet all the other shared data is being passed.