Problem with the container background

import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";

export default function Main({ isQuizCompleted }) {
    
    return (
        <div className="container" style={{
            backgroundColor: isQuizCompleted ? 'transparent' : '#343964'}}>
            {/* Only render Questions if the quiz is not completed */}
            {!isQuizCompleted && <Questions />}
            
            {/* Render QuizResults when the quiz is completed */}
            <QuizResults isQuizCompleted={isQuizCompleted} />
        </div>
    );
}

import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";

export default function Main({ isQuizCompleted }) {
    
    return (
        <div className="container" style={{
            backgroundColor: isQuizCompleted ? 'transparent' : '#343964'}}>
            {/* Only render Questions if the quiz is not completed */}
            {!isQuizCompleted && <Questions />}
            
            {/* Render QuizResults when the quiz is completed */}
            <QuizResults isQuizCompleted={isQuizCompleted} />
        </div>
    );
}