Retrieving image_url from json server into quizzes

Question

I am building a Quiz app. Initially, the quiz app did not have image_url. But now I want to add some image quizzes. I have also added a key-value pair for the image_url in my JSON object. But I am still unable to retrieve these images into my quiz app.

I am adding my code sandbox here to help you guys understand my problem. There is a db.json file but I am running it on a JSON server to retrieve the data.

import React, { useState } from 'react';
import { QuestionCard } from './QuestionCard';
import { fetchQuizQuestions } from './API';
import styled from 'styled-components';

import { Difficulty, QuestionsState } from './API';

const HiddenRadioButton = styled.input.attrs({
    type: 'radio',
})`
    height: 25px;
    width: 25px;
    cursor: pointer;
    position: absolute;
    opacity: 0;
`;

export const RadioButton = styled.span`
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: red;
    pointer-events: none;

    ${HiddenRadioButton}:checked + && {
        background-color: red;
    }
`;

export type AnswerObject = {
    question: string;
    answer: string;
    correct: string;
    correctAnswer: string;
};

const TOTAL_QUESTION = 10;

export default function App() {
    const [loading, setLoading] = useState(false);
    const [questions, setQuestions] = useState<QuestionsState[]>([]);
    const [number, setNumber] = useState(0);
    const [userAnswers, setUserAnswers] = useState<AnswerObject[]>([]);
    const [score, setScore] = useState(0);
    const [gameOver, setGameOver] = useState(true);

    console.log(questions);

    const startTrivia = async () => {
        setLoading(true);
        setGameOver(false);
        const newQuestions = await fetchQuizQuestions(
            TOTAL_QUESTION,
            Difficulty.EASY
        );

        setQuestions(newQuestions);
        setScore(0);
        setUserAnswers([]);
        setNumber(0);
        setLoading(false);
    };

    const CheckAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (!gameOver) {
            //user answer
            const answer = e.currentTarget.value;
            // check answer again the correct answer
            const correct = questions[number].correct_answer === answer;
            //add score if the answer is correct
            if (correct) setScore((prev) => prev + 1);
            // save answer in the array for user answers

            // I place :any myself just to turn off error, i must need to be fix
            const answerObject: any = {
                question: questions[number].question,
                answer,
                correct,
                correctAnswer: questions[number].correct_answer,
            };
            setUserAnswers((prev) => [...prev, answerObject]);
        }
    };

    const nextQuestion = () => {
        // move to the next question if it is not the last question
        const nextQuestion = number + 1;

        if (nextQuestion === TOTAL_QUESTION) {
            setGameOver(true);
        } else {
            setNumber(nextQuestion);
        }
    };

    return (
        <>
            <h1>Trivia App</h1>
            <RadioButton />
            {gameOver || userAnswers.length === TOTAL_QUESTION ? (
                <button className="start" onClick={startTrivia}>
                    start
                </button>
            ) : null}
            {!gameOver ? <p className="score">Score:</p> : null}

            {loading && <p>Loading question....</p>}

            {!loading && !gameOver && (
                <QuestionCard
                    question={questions[number].question}
                    answers={questions[number].answers}
                    callback={CheckAnswer}
                    userAnswer={userAnswers ? userAnswers[number] : undefined}
                    questionNr={number + 1}
                    totalQuestions={TOTAL_QUESTION}
                />
            )}
            {!loading &&
            !gameOver &&
            userAnswers.length === number + 1 &&
            number !== TOTAL_QUESTION - 1 ? (
                <button className="next" onClick={nextQuestion}>
                    Next
                </button>
            ) : null}
        </>
    );
}