I have a quiz app in react.js. When the Quiz component sends the props to the Question component, upon logging the options in the Question component it still says undefined.

Quiz:

const Quiz = (props) => {
  const [options,setOptions]=useState(null);
  const [currentQuestion,setCurrentQuestion]=useState(0);
  useEffect(()=>{
    var optionss=[];
    optionss.push(props.questions[currentQuestion].correct_answer);
    props.questions[currentQuestion].incorrect_answers.forEach((ans)=>optionss.push(ans));
    optionss.sort(()=>Math.random()-0.5);
    setOptions(optionss);
  },[props.questions])
  
  
  return (
  <div className='quiz'>
    <span className="subtitle">Welcome ,{props.name}</span>
    <div className="questionInfo">
       <span>{props.questions[currentQuestion].category}</span>
       <span>Score : {props.score}</span> 
    </div>
    <Question 
      questions={props.questions} 
      setQuestions={props.setQuestions}
      currentQuestion={currentQuestion} 
      setCurrentQuestion={setCurrentQuestion}
      options={options}
      correctOption={props.questions[currentQuestion].correct_answer}
     />
  </div>
  );
};

Question:

const Question = ({
      questions,
      setQuestions,
      currentQuestion,
      setCurrentQuestion,
      options,
      correctOption,
     
}) => {
  
  return (
  <div>
      <h1>Question : {currentQuestion+1}</h1>
      <div className="singleQuestion">
        <h2>{questions[currentQuestion].question}</h2>
        <div className="options">
            {options.map((option)=>{
                return(
                    <button 
                     disabled={selected} 
                     key={option} 
                     onClick={()=>{}}
                     className={`singleOption ${selected && handleSelect(option)}`}
                     >{option}</button>
                )
            })}
        </div>
      </div>
  </div>
  );
};

Also while iterating through the options in the Question component gives an error:cannot read properties of null.