How to handle inputs for Radiobutton with a Textfield as its label

Question

I'm struggling to get inputs for radio buttons that have a text field as its label.

I'm also having difficulty dynamically 'check' the radio button when the text field next to it is receiving user inputs.

The end goal for it is to make it function like Google form, where the user is doing a MCQ question and he/she selects the 'Others' option and then writes some text in a text field. I want to be able to capture the input text within an object called selectedRadioButton and then append selectedRadioButton to an array that stores all of the responses.

Another problem I'm having is that I cannot seem to capture the entire input string, because the last character of the input was sliced off when I added it into the object state. My last question is, how can I make sure I'm capturing the entire input string without slicing off anything?

Here's what my UI looks like, you can see the value for specifications from 'All Responses' array isn't displaying the entire text input. my code

My code for handling radio button input that has a text field in the label (className="customOption"):

// singleSelectQuestions is contains a function that returns jsx, which displays the suitable components based on the question attributes.
// In this case, all questions should be wrapped around by radio button components because they're all single select

const singleSelectQuestions = currQuestion.answerOptions.map(
 
  ({ answerText, price }) =>
    answerText !== "Custom" ? (
      <FormControlLabel
        value={answerText}
        control={<Radio />} // normal radio button
        label={answerText}
        price={price}
        // We need to capture the selected answer option and the price into a state for each option
        // The we will pass this state (object) into the hook that handles updating the entire response object

        onClick={() =>
          updateSelectedRadioButton({
            selectedAnswer: answerText,
            price: price,
          })
        }
      />
    ) : (
      <div className="customOption">
        <FormControlLabel
          control={<Radio />}
          value={answerText}
          price={price}
          floatingLabelFixed={true}
          label={
            <TextField
              required
              label="Please Specify"
              onKeyDown={(e) => updateSpecifications(e.target.value)}
            />
          }
          onClick={() =>
            updateSelectedRadioButton({
              selectedAnswer: answerText,
              specifications: specifications,
              price: 0,
            })
          }
        />
      </div>
    )
);

Answer 1

Here is a working example of how to gather the text from the <Input /> in the <FormControlLabel />:

import React, { useState } from "react";
import { FormControlLabel, Radio, TextField } from '@material-ui/core';

export default function OtherInput() {

  const [ checked, setChecked ] = useState(false);

  const [ otherInfo, setOtherInfo ] = useState('');

  return (
    <div>
      <h1>"Other" Radio Input with Hook:</h1>
      <h2>Checked: {checked.toString()} </h2>
      <h2>Input result: {otherInfo} </h2>
      <FormControlLabel
          control={
            <Radio
            checked={checked}
            onClick={() => setChecked(!checked)}
            value="other"
            color='primary'
            label='other'/>
          }
          label={
            checked ?
              <TextField
                disabled={!checked}
                label="Please Specify"
                onKeyDown={(e) => setOtherInfo(e.target.value)}/>
            : 'Other'
          }/>

    </div>
  );
}

Example CodeSandbox: https://codesandbox.io/s/stack-65535893-otherinput-4hpm7?file=/src/OtherInput.js