Headless UI Radio Group doesn't include a defaultChecked

gistfile1.txt

import React from "react"
import { RadioGroup } from "@headlessui/react"
import { classNames } from "../../utils/classNames"
import PropTypes from "prop-types"
import { CheckCircleIcon } from "@heroicons/react/solid"

export const RadioTemplate = ({
  handleAnswers,
  quiz,
  activeStep,
  responses,
}) => {
  const radioValue = () => {
    switch (activeStep) {
      case 0:
        return responses.type_of_project
      case 2:
        return responses.is_this_an_emergency
      case 5:
        return responses.project_status
      case 6:
        return responses.moving_in_or_out
      case 8:
        return responses.covered_by_insurance_claim
      case 9:
        return responses.owner_of_property
      default:
        return null
    }
  }

  console.log("radioValue", radioValue())

  return (
    <RadioGroup
      value={radioValue()}
      defaultChecked={radioValue()}
      onChange={handleAnswers}
    >
      <RadioGroup.Label className="sr-only">
        {quiz[activeStep].question}
      </RadioGroup.Label>

      <div className="space-y-4">
        {quiz[activeStep].options.map(option => (
          <RadioGroup.Option
            key={option.id}
            value={option}
            className={({ active }) =>
              classNames(
                active
                  ? "ring-1 ring-offset-2 ring-cyan-500 bg-cyan-300 border-cyan-400"
                  : "bg-white",
                "relative block rounded-lg border border-gray-300 shadow-sm px-6 py-4 cursor-pointer sm:flex sm:justify-between focus:outline-none"
              )
            }
          >
            {({ checked }) => (
              <>
                <div className="flex items-center">
                  <div className="text-sm">
                    <RadioGroup.Label as="p" className="font-medium">
                      {option.msg}
                    </RadioGroup.Label>
                  </div>
                </div>

                <div
                  className={classNames(
                    checked ? "border-cyan-500" : "border-transparent",
                    "absolute -inset-px rounded-lg border-2 pointer-events-none"
                  )}
                  // aria-hidden="true"
                >
                  {checked && (
                    <div className="flex-shrink-0 text-white">
                      <CheckCircleIcon className="w-6 h-6 text-green-500" />
                    </div>
                  )}
                </div>
              </>
            )}
          </RadioGroup.Option>
        ))}
      </div>
    </RadioGroup>
  )
}

RadioTemplate.propTypes = {
  handleAnswers: PropTypes.func,
  quiz: PropTypes.array,
  activeStep: PropTypes.number,
  responses: PropTypes.object,
}