I'm working on an Innovation Index Toolkit using Preact with signals for state management. The issue I'm facing is that I cannot navigate to the next question because the radio button selections aren't properly updating the state.

Code snippet of my radio button implementation:

<label key={i} class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded">
  <input
    type="radio"
    name={`answer-${currentStep.value}`}
    value={i + 1}
    checked={answers.value[currentStep.value] === i + 1}
    onInput={(e) => {
      const newValue = parseInt(e.currentTarget.value);
      console.log("Recording answer for question", currentStep.value, ":", newValue);
      const newAnswers = [...answers.value];
      newAnswers[currentStep.value] = newValue;
      answers.value = newAnswers;
    }}
    class="h-4 w-4 text-blue-600"
  />
  <span class="flex-1">
    {i + 1} - {label}
  </span>
</label>

I've confirmed via console logs that the click events are being registered, but the state (using @preact/signals) isn't updating properly. The handleNext function checks if an answer exists before allowing navigation:

const handleNext = () => {
  if (answers.value[currentStep.value] === undefined) {
    alert("Please select an answer before continuing");
    return;
  }
  // ...rest of the code
};

I've tried:

• Using onChange instead of onInput
• Directly setting the value with answers.value[currentStep.value] = newValue
• Creating a new array and setting the entire answers signal

Any suggestions on how to fix this issue with state updates in Preact using signals?