I am super new to react so I'm completely confused as to what's going on.

I am trying to add "question" and "answer" as an object to a certain array based on the option value selected.
Option value works, as well as payload from inputs, but I can't seem to get the logic of the return with state here:

return [
          ...state,
          htmlArray.push({
            question: action.payload.question,
            answer: action.payload.answer,
          }),
        ];

it just adds number 1 to the state, as another element in state array. I know I should separate my components, but I'm new to all of this, so it's easier for now to think of it in just one file.

Here's the code with removed other cases for transparency :

import React, { useReducer, useState } from "react";
import { v4 as uuidv4 } from "uuid";

const Form = () => {
    
  const [question, setQuestion] = useState("");
  const [answer, setAnswer] = useState("");
  const [option, setOption] = useState("html");

  let htmlArray = [];
  let cssArray = [];
  let jsArray = [];
  let reactArray = [];
  let theoryArray = [];

  const questionReducer = (state, action) => {
    switch (action.type) {
      case "html":
        return [
          ...state,
          htmlArray.push({
            question: action.payload.question,
            answer: action.payload.answer,
          }),
        ];
      default:
        break;
    }
  };

  const [state, dispatch] = useReducer(questionReducer, [
    htmlArray,
    cssArray,
    jsArray,
    reactArray,
    theoryArray,
  ]);
  console.log(state);

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({
      type: option,
      payload: {
        question: question,
        answer: answer,
      },
    });
    setQuestion("");
    setAnswer("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        placeholder="question"
        onChange={(e) => setQuestion(e.target.value)}
        value={question}
      />
      <input
        placeholder="answer"
        onChange={(e) => setAnswer(e.target.value)}
        value={answer}
      />
      <select value={option} onChange={(e) => setOption(e.target.value)}>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JS</option>
        <option value="react">React</option>
        <option value="theory">CS</option>
      </select>
      <button type="submit" value="Add question">
        Enter Question
      </button>
      <div>{question}</div>
      <div>{answer}</div>
    </form>
  );
};
export default Form;

const [squares,setSquares]=useState([]);

  const addSquare=()=>{
    setSquares([...squares,'']);
  }
  const removeSquare=()=>{
    setSquares(squares.pop());
  }

I feel like something is wrong here. Can someone help me please? :)