select menu and input value changing same state value

Question

I have a small problem with my dynamic form. In the code below the render method I have code that maps an input and a dropdown select menu to fill in state.questions[{title: "", type: ""}]. You can see the addQuestionsHandler method to add more questions and the questionsInputHandler to handle the questions values.
The surveyInputHandler method handles the static questions in the return function. The problem I'm having is that in my code for the dynamic questions the input value and the select dropdown value are ending ending up the same in state.questions[{title: "", type: ""}]. If I input "Test" - both title and type will be "Test". If I input "Test" and select value = "Radio Button" - both title and type will be "Radio Button". If I don't select a dropdown option value, then both will be the input value. If I do select a dropdown option value then the input value will be overridden by the dropdown select value.
I've racked my brain for a while but I need more eyes on it. Can you please let me know what I'm not doing correctly? Thanks so much.

 const questionTypes = [
"Select Question Type",
"Textbox",
"Radio Button",
"Checkbox"
];

class SurveyQuestions extends Component {
constructor(props) {
    super(props);
    this.state = {
    title: "",
    description: "",
    pointsValue: 0,
    questions: [
        {
        title: "",
        type: ""
        }
    ]
    };
}

surveyInputHandler = e => {
    console.log(e.target.value);
    this.setState({
    [e.target.name]: e.target.value,
    [e.target.title]: e.target.value,
    [e.target.description]: e.target.value,
    [e.target.pointsValue]: e.target.value
    });
};

questionsInputHandler = idx => e => {
    console.log(e.target.value);
    const newQuestions = this.state.questions.map((question, qidx) => {
    if (idx !== qidx) return question;
    return {
        ...question,
        title: e.target.value,
        type: e.target.value
    };
    });
    this.setState({
    questions: newQuestions
    });
};

addQuestionHandler = () => {
    this.setState(prevState => ({
    questions: [...prevState.questions, { title: "", type: "" }]
    }));
};

submitHandler = e => {
    const { title, description, pointsValue, questions } = this.state;
    console.log(
    title,
    description,
    pointsValue,
    questions.map(question => ({ ...question }))
    );
    this.setState({
    title: "",
    description: "",
    pointsValue: "",
    questions: [{ title: "", type: "" }]
    });
    e.preventDefault();
};

render() {
    const { title, description, pointsValue, questions } = this.state;
    const questionsDisplay = questions.map((question, idx) => (
    <div key={idx} className="SurveyQuestions__QuestionContainer">
        <h5>Question {idx + 1}</h5>
        <label htmlFor="questionTitle">Question Title</label>
        <input
        type="text"
        id="questionTitle"
        placeholder={`Question Title #${idx + 1}`}
        value={question.title}
        onChange={this.questionsInputHandler(idx)}
        />
        <label htmlFor="questionType">Type</label>
        <select
        className="SurveyQuestions__QuestionTypesDropdown"
        value={question.type}
        onChange={this.questionsInputHandler(idx)}
        >
        {questionTypes.map((type, tidx) => (
            <option key={tidx} id={`${type}-${tidx}`} value={type}>
            {type}
            </option>
        ))}
        </select>
    </div>
    ));

Answer 1

Solved: So the simple solution was to create a separate input handler for the select dropdown menu. The code is below:

questionTypeInputHandler = idx => e => {
const newQuestions = this.state.questions.map((question, qidx) => {
  if (idx !== qidx) return question;
  return {
    ...question,
    type: e.target.value
  };
});
this.setState({
  questions: newQuestions
});

};