The Image is not displaying correctly

there is an image of quiz-app which should be displayed in the 60% of the screen but it is showing this. instead this is the auth component:

import React from 'react';
import './Auth.css';

const Auth = ({ onAuth, setUsername, setPassword }) => {
  return (
    <div className="auth-form-container">
      <input
        type="text"
        placeholder="Username"
        onChange={(e) => setUsername(e.target.value)}
        className="auth-input"
      />
      <input
        type="password"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
        className="auth-input"
      />
      <button onClick={() => onAuth('login')} className="auth-button">Login</button>
      <button onClick={() => onAuth('register')} className="auth-button">Sign Up</button>
    </div>
  );
};

export default Auth;

and this is the auth.css code

.auth-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .auth-input {
    width: 100%;
    max-width: 300px;
    margin: 10px 0;
    padding: 10px;
    border-radius: 25px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .auth-button {
    width: 100%;
    max-width: 300px;
    margin: 10px 0;
    padding: 10px;
    border-radius: 25px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
  }
  
  .auth-button:hover {
    background-color: #0056b3;
  }
  

and this is the app.js

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';
import Auth from './components/Auth';
import Exam from './components/Exam';
import ProfileCard from './components/ProfileCard';
import AdminPanel from './components/AdminPanel';

const App = () => {
  const [mode, setMode] = useState('auth'); // 'auth' or 'exam'
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [questions, setQuestions] = useState([]);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(null);
  const [error, setError] = useState('');
  const [isAdmin, setIsAdmin] = useState(false);

  const handleAuth = async (endpoint) => {
    try {
      const response = await axios.post(`http://localhost:4000/${endpoint}`, { username, password });
      if (response.status === 200 || response.status === 201) {
        setMode('exam');
        fetchQuestions();
      }
    } catch (err) {
      setError(err.response?.data?.message || 'Error during authentication');
    }
  };

  const fetchQuestions = async () => {
    try {
      const response = await axios.get('http://localhost:4000/questions');
      setQuestions(response.data);
    } catch (err) {
      setError('Error fetching questions');
    }
  };

  const handleSubmit = async () => {
    try {
      const response = await axios.post('http://localhost:4000/submit', { answers });
      setScore(response.data.score);
    } catch (err) {
      setError('Error submitting answers');
    }
  };

  return (
    <div className="app-container">
      {mode === 'auth' && (
        <div className="auth-container">
          <div className="auth-image">
            <img src="/assets/quiz-app.png" alt="Quiz" />
          </div>
          <div className="auth-form">
            <Auth onAuth={handleAuth} setUsername={setUsername} setPassword={setPassword} />
          </div>
        </div>
      )}
      {mode === 'exam' && (
        <div className="exam-container">
          <div className="exam-questions">
            <Exam questions={questions} handleAnswerChange={(qId, option) => setAnswers(prev => ({ ...prev, [qId]: option }))} handleSubmit={handleSubmit} />
          </div>
          <div className="profile-card">
            <ProfileCard />
          </div>
          {isAdmin && (
            <div className="admin-panel">
              <AdminPanel onSwitchToAuth={() => setMode('auth')} />
            </div>
          )}
          <button className="admin-panel-button" onClick={() => setIsAdmin(!isAdmin)}>Admin Panel</button>
        </div>
      )}
    </div>
  );
};

export default App;

and this is the app.css

/* General Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Main Container */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Auth Container */
.auth-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Auth Image Section */
.auth-image {
  width: 60%;
  height: 100%; /* Ensure it covers the full height */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4; /* Optional background color */
  overflow: hidden; /* Hide any overflow */
}

.auth-image img {
  width: 100%;
  height: 100%; /* Ensure it covers the full height */
  object-fit: cover; /* Scale the image to cover the container */
}

/* Auth Form Section */
.auth-form {
  width: 40%;
  height: 100%; /* Ensure it covers the full height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Auth Form Inputs */
.auth-input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 25px;
}

.auth-button {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 25px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.auth-button:hover {
  background-color: #0056b3;
}

/* Exam Container */
.exam-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Exam Questions Section */
.exam-questions {
  width: 66%;
  padding: 20px;
  overflow-y: auto;
}

/* Profile Card Section */
.profile-card {
  width: 33%;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Admin Panel Button */
.admin-panel-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 16px;
  z-index: 1000; /* Ensure button is above other content */
}

.admin-panel-button:hover {
  background-color: #0056b3;
}

/* Admin Panel */
.admin-panel {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
}

the quiz-app.png is not displaying correctly which is in the assets folder

I was trying to display the quiz app png on the 60% of the screen instead it is just showing one image icon!