### src\pages\lobbyScreen\useLobbyData.test.tsx

```typescript
import { renderHook, act, waitFor } from '@testing-library/react';
import { vi } from 'vitest';
import useLobbyData from './useLobbyData';
import { doc, updateDoc } from 'firebase/firestore';
import { httpsCallable } from 'firebase/functions';
import usePlayerStore from '../../store/usePlayerStore';
import { BrowserRouter, useNavigate } from 'react-router-dom';
import { useGame } from '../../contexts/GameContext';

vi.mock('../../store/usePlayerStore', () => ({
    __esModule: true,
    default: vi.fn(),
}));

vi.mock('react-router-dom', async () => {
    const actual = await vi.importActual('react-router-dom');
    return {
        ...actual,
        useNavigate: vi.fn(),
    };
});

vi.mock('../../contexts/GameContext', () => ({
    useGame: vi.fn(),
}));

describe('useLobbyData Hook', () => {
    const mockGameId = 'testGameId';
    const mockPlayerStore = usePlayerStore as unknown as vi.Mock;
    const mockUseGame = useGame as jest.Mock;

    beforeEach(() => {
        vi.resetAllMocks();
        mockPlayerStore.mockImplementation((selector: (state: { name: string }) => string) => {
            return selector({ name: 'TestPlayer' });
        });
        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: null,
            error: null,
        });
    });

    it('should initialize correctly with game data', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
            numberOfTeams: 2,
            playersPerTeam: 2,
            numberOfRounds: 3,
            jokerUsage: true,
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await waitFor(() => {
            expect(result.current.players).toEqual(mockGameData.teams.flatMap(team => team.players));
            expect(result.current.isHost).toBe(true);
            expect(result.current.error).toBeNull();
        });
    });

    it('should update player status successfully', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        (doc as vi.Mock).mockReturnValue('docRef');
        (updateDoc as vi.Mock).mockResolvedValue(null);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.updatePlayerStatus('TestPlayer', true);
        });

        expect(updateDoc).toHaveBeenCalledWith('docRef', {
            'teams.0.players.0.isReady': true,
        });

        expect(result.current.error).toBeNull();
    });

    it('should handle updatePlayerStatus error correctly', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        (doc as vi.Mock).mockReturnValue('docRef');
        (updateDoc as vi.Mock).mockRejectedValue(new Error('Update failed'));

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.updatePlayerStatus('TestPlayer', true);
        });

        expect(updateDoc).toHaveBeenCalledWith('docRef', {
            'teams.0.players.0.isReady': true,
        });

        expect(result.current.error).toBe('Failed to update player status.');
    });

    it('should handle invalid player name in updatePlayerStatus', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.updatePlayerStatus('NonExistentPlayer', true);
        });

        expect(updateDoc).not.toHaveBeenCalled();
        expect(result.current.error).toBe('Player not found.');
    });

    it('should handle invalid gameId gracefully', async () => {
        mockUseGame.mockReturnValue({
            gameId: '',
            gameData: null,
            error: 'Invalid game ID.',
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await waitFor(() => {
            expect(result.current.error).toBe('Invalid game ID.');
            expect(result.current.players).toEqual([]);
        });
    });

    it('should leave the game successfully', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const mockLeaveGameFunction = vi.fn().mockResolvedValue({ data: { message: 'Successfully left the game.' } });
        (httpsCallable as vi.Mock).mockReturnValue(mockLeaveGameFunction);

        const mockNavigate = vi.fn();
        (useNavigate as vi.Mock).mockReturnValue(mockNavigate);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.leaveGame();
        });

        expect(httpsCallable).toHaveBeenCalledWith(expect.anything(), 'leaveGame');
        expect(mockLeaveGameFunction).toHaveBeenCalledWith({ gameId: mockGameId, playerName: 'TestPlayer' });
        expect(mockNavigate).toHaveBeenCalledWith('/');
        expect(result.current.error).toBeNull();
    });

    it('should start the game successfully', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const mockStartGameFunction = vi.fn().mockResolvedValue({ data: { message: 'Game started successfully.' } });
        (httpsCallable as vi.Mock).mockReturnValue(mockStartGameFunction);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.startGame();
        });

        expect(httpsCallable).toHaveBeenCalledWith(expect.anything(), 'startGame');
        expect(mockStartGameFunction).toHaveBeenCalledWith({ gameId: mockGameId });
        expect(result.current.error).toBeNull();
        expect(result.current.isStartingGame).toBe(false);
    });

    it('should handle startGame error correctly', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [
                {
                    teamName: 'Team 1',
                    players: [{ name: 'TestPlayer', isReady: false }],
                },
            ],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const mockStartGameFunction = vi.fn().mockRejectedValue(new Error('Start game failed'));
        (httpsCallable as vi.Mock).mockReturnValue(mockStartGameFunction);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.startGame();
        });

        expect(httpsCallable).toHaveBeenCalledWith(expect.anything(), 'startGame');
        expect(mockStartGameFunction).toHaveBeenCalledWith({ gameId: mockGameId });
        expect(result.current.error).toBe('Failed to start the game.');
        expect(result.current.isStartingGame).toBe(false);
    });

    it('should handle game not found', async () => {
        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: null,
            error: 'Game not found.',
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await waitFor(() => {
            expect(result.current.error).toBe('Game not found.');
            expect(result.current.players).toEqual([]);
        });
    });

    it('should handle error in fetching game data', async () => {
        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: null,
            error: 'Failed to fetch game data.',
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await waitFor(() => {
            expect(result.current.error).toBe('Failed to fetch game data.');
            expect(result.current.players).toEqual([]);
        });
    });

    it('should navigate to game screen when game status changes to in-progress', async () => {
        const mockNavigate = vi.fn();
        (useNavigate as vi.Mock).mockReturnValue(mockNavigate);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        act(() => {
            mockUseGame.mockReturnValue({
                gameId: mockGameId,
                gameData: {
                    id: mockGameId,
                    status: 'in-progress',
                    teams: [],
                    createdBy: 'SomeoneElse',
                },
                error: null,
            });
        });

        expect(mockNavigate).toHaveBeenCalledWith(`/game/${mockGameId}`);
    });

    it('should not allow non-host to start the game', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [{ teamName: 'Team 1', players: [{ name: 'TestPlayer', isReady: false }] }],
            createdBy: 'SomeoneElse',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const mockStartGameFunction = vi.fn();
        (httpsCallable as vi.Mock).mockReturnValue(mockStartGameFunction);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await waitFor(() => {
            expect(result.current.isHost).toBe(false);
        });

        await act(async () => {
            await result.current.startGame();
        });

        expect(mockStartGameFunction).not.toHaveBeenCalled();
    });

    it('should handle error when leaving game', async () => {
        const mockGameData = {
            id: mockGameId,
            teams: [{ teamName: 'Team 1', players: [{ name: 'TestPlayer', isReady: false }] }],
            createdBy: 'TestPlayer',
            status: 'waiting',
        };

        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: mockGameData,
            error: null,
        });

        const mockLeaveGameFunction = vi.fn().mockRejectedValue(new Error('Leave game failed'));
        (httpsCallable as vi.Mock).mockReturnValue(mockLeaveGameFunction);

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.leaveGame();
        });

        expect(result.current.error).toBe('Failed to leave the game.');
    });

    it('should handle game data not available when updating player status', async () => {
        mockUseGame.mockReturnValue({
            gameId: mockGameId,
            gameData: null,
            error: null,
        });

        const { result } = renderHook(() => useLobbyData(), {
            wrapper: BrowserRouter,
        });

        await act(async () => {
            await result.current.updatePlayerStatus('TestPlayer', true);
        });

        expect(result.current.error).toBe('Game data is not available.');
    });
});
```

### src\pages\lobbyScreen\useLobbyData.tsx

```typescript
import { useState, useEffect } from 'react';
import { updateDoc, doc } from 'firebase/firestore';
import { db, functions } from '../../firebase/config';
import { Player } from '../../types';
import usePlayerStore from '../../store/usePlayerStore';
import { httpsCallable } from 'firebase/functions';
import { useGame } from '../../contexts/GameContext';
import { useNavigate } from 'react-router-dom';
import useGameStore from '../../store/useGameStore';

const useLobbyData = () => {
    const { gameId, gameData } = useGame();
    const [players, setPlayers] = useState<Player[]>([]);
    const [isHost, setIsHost] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [isStartingGame, setIsStartingGame] = useState(false);
    const currentPlayer = usePlayerStore((state) => state.name);
    const navigate = useNavigate();

    useEffect(() => {
        if (gameData) {
            setPlayers(gameData.teams?.flatMap((team) => team.players) || []);
            setIsHost(gameData.createdBy === currentPlayer);
        } else {
            setPlayers([]);
            setIsHost(false);
        }
    }, [gameData, currentPlayer]);

    const updatePlayerStatus = async (playerName: string, isReady: boolean) => {
        if (!gameData) {
            setError('Game data is not available.');
            return;
        }

        const teamIndex = getPlayerTeamIndex(playerName);
        const playerIndex = getPlayerIndex(playerName);

        if (teamIndex === -1 || playerIndex === -1) {
            setError('Player not found.');
            return;
        }

        const updatePath = `teams.${teamIndex}.players.${playerIndex}.isReady`;

        try {
            await updateDoc(doc(db, 'games', gameId!), {
                [updatePath]: isReady,
            });
        } catch (err) {
            console.error('Error updating player status:', err);
            setError('Failed to update player status.');
        }
    };

    const startGame = async () => {
        if (!isHost) return;

        setIsStartingGame(true);
        try {
            const startGameFunction = httpsCallable(functions, 'startGame');
            await startGameFunction({ gameId });
        } catch (err) {
            console.error('Error starting game:', err);
            setError('Failed to start the game.');
        } finally {
            setIsStartingGame(false);
        }
    };

    const leaveGame = async () => {
        if (!gameId) {
            setError('No game ID found.');
            return;
        }

        try {
            const leaveGameFunction = httpsCallable(functions, 'leaveGame');
            await leaveGameFunction({ gameId, playerName: currentPlayer });
            // Clear local state
            useGameStore.getState().clearGameId();
            usePlayerStore.getState().clearName(); // Assuming clearName is an action in usePlayerStore
            navigate('/');
        } catch (err) {
            console.error('Error leaving game:', err);
            setError('Failed to leave the game.');
        }
    };

    // Helper functions to find player's team and index
    const getPlayerTeamIndex = (playerName: string): number => {
        return gameData?.teams.findIndex((team) =>
            team.players.some((player) => player.name === playerName)
        ) ?? -1;
    };

    const getPlayerIndex = (playerName: string): number => {
        const teamIndex = getPlayerTeamIndex(playerName);
        return gameData?.teams[teamIndex]?.players.findIndex((player) => player.name === playerName) ?? -1;
    };

    return { players, isHost, error, isStartingGame, updatePlayerStatus, startGame, leaveGame };
};

export default useLobbyData;

```

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 5 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/pages/lobbyScreen/useLobbyData.test.tsx > useLobbyData Hook > should handle invalid gameId gracefully
AssertionError: expected null to be 'Invalid game ID.' // Object.is equality

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div />
  </body>
</html>

- Expected:
"Invalid game ID."

+ Received:
null

 ❯ src/pages/lobbyScreen/useLobbyData.test.tsx:195:42
    193|
    194|         await waitFor(() => {
    195|             expect(result.current.error).toBe('Invalid game ID.');
       |                                          ^
    196|             expect(result.current.players).toEqual([]);
    197|         });
 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:47:12
 ❯ checkCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:127:77
 ❯ Timeout.checkRealTimersCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:121:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/5]⎯

 FAIL  src/pages/lobbyScreen/useLobbyData.test.tsx > useLobbyData Hook > should leave the game successfully
AssertionError: expected "spy" to be called with arguments: [ '/' ]

Received:



Number of calls: 0

 ❯ src/pages/lobbyScreen/useLobbyData.test.tsx:235:30
    233|         expect(httpsCallable).toHaveBeenCalledWith(expect.anything(), 'leav…
    234|         expect(mockLeaveGameFunction).toHaveBeenCalledWith({ gameId: mockGa…
    235|         expect(mockNavigate).toHaveBeenCalledWith('/');
       |                              ^
    236|         expect(result.current.error).toBeNull();
    237|     });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/5]⎯

 FAIL  src/pages/lobbyScreen/useLobbyData.test.tsx > useLobbyData Hook > should handle game not found
AssertionError: expected null to be 'Game not found.' // Object.is equality

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div />
  </body>
</html>

- Expected:
"Game not found."

+ Received:
null

 ❯ src/pages/lobbyScreen/useLobbyData.test.tsx:323:42
    321|
    322|         await waitFor(() => {
    323|             expect(result.current.error).toBe('Game not found.');
       |                                          ^
    324|             expect(result.current.players).toEqual([]);
    325|         });
 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:47:12
 ❯ checkCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:127:77
 ❯ Timeout.checkRealTimersCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:121:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/5]⎯

 FAIL  src/pages/lobbyScreen/useLobbyData.test.tsx > useLobbyData Hook > should handle error in fetching game data
AssertionError: expected null to be 'Failed to fetch game data.' // Object.is equality

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div />
  </body>
</html>

- Expected:
"Failed to fetch game data."

+ Received:
null

 ❯ src/pages/lobbyScreen/useLobbyData.test.tsx:340:42
    338|
    339|         await waitFor(() => {
    340|             expect(result.current.error).toBe('Failed to fetch game data.');
       |                                          ^
    341|             expect(result.current.players).toEqual([]);
    342|         });
 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:47:12
 ❯ checkCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:127:77
 ❯ Timeout.checkRealTimersCallback node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:121:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/5]⎯

 FAIL  src/pages/lobbyScreen/useLobbyData.test.tsx > useLobbyData Hook > should navigate to game screen when game status changes to in-progress
AssertionError: expected "spy" to be called with arguments: [ '/game/testGameId' ]   

Received:



Number of calls: 0

 ❯ src/pages/lobbyScreen/useLobbyData.test.tsx:366:30
    364|         });
    365|
    366|         expect(mockNavigate).toHaveBeenCalledWith(`/game/${mockGameId}`);   
       |                              ^
    367|     });
    368|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/5]⎯
fix these tests