Javascript – React prop drilling strange bug

I am getting a list of questions i created through a fake API (so assume the question list is always givven correctly from the API and that the list is always the same)
After that i am putting this Q list in questions state and wanna move a specific question from the app.js to Question componant

the problem is that before i move it to the Question comp as question variable it contains the question object but then in the Question comp it is wrap with question.

this is my app.js code:

import { useEffect, useReducer } from "react";
import Header from "./Header";
import Main from "./Main";
import Loader from "./Loader";
import Error from "./Error";
import StartScreen from "./StartScreen";
import Question from "./Question";

const inoitialState = {
  questions: [],

  // 'loading' ,'error', 'ready', 'active', 'finished'
  status: "loading",
  index: 0,
};

function reducer(state, action) {
  switch (action.type) {
    case "dataRecieved":
      return { ...state, questions: action.payload, status: "ready" };
    case "dataFailed":
      return { ...state, status: "error" };
    case "start":
      return { ...state, status: "active" };
    default:
      throw new Error("action unkown");
  }
}

export default function App() {
  const [{ questions, status, index, answer }, dispatch] = useReducer(
    reducer,
    inoitialState
  );
  const numQuestions = questions.length;
  useEffect(function () {
    fetch("http://localhost:8000/questions")
      .then((res) => res.json())
      .then((data) => dispatch({ type: "dataRecieved", payload: data }))
      .catch((err) => dispatch({ type: "dataFailed" }));
  }, []);

  console.log(questions[index]);
  return (
    <div className="app">
      <Header />

      <Main>
        {status === "loading" && <Loader />}
        {status === "error" && <Error />}
        {status === "ready" && (
          <StartScreen dispatch={dispatch} numQuestions={numQuestions} />
        )}
        {status === "active" && <Question question={questions[index]} />}
      </Main>
    </div>
  );
}

and this is the coinsole output:
enter image description here

now in Question.js i get this output
enter image description here
with this code:

import Options from "./Options";

function Question(question, dispatch, answer) {
  console.log(question);
    console.log(question.question);
  return (
    <div>
      <h4>{question.question.question}</h4>
      <Options question={question.question} answer={answer} />
    </div>
  );
}

export default Question;

my question is why is it happening as question should contain the object but in order to get it i need to write question.question
Edit:to make it clear my problem is not with the drilling or props my problem is why do i need to write question.question instead of just having the object inside question.