refactor(ui): use the Radio component instead of RadioGroup.Option (#3454)

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -6,7 +6,7 @@ import useToasts from '@app/hooks/useToasts';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
-import { Label, RadioGroup } from '@headlessui/react';
+import { Label, Radio, RadioGroup } from '@headlessui/react';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
@@ -244,8 +244,9 @@ const CreateIssueModal = ({
               <Label className="sr-only">Select an Issue</Label>
               <div className="-space-y-px overflow-hidden rounded-md bg-gray-800/30">
                 {issueOptions.map((setting, index) => (
-                  <RadioGroup.Option
+                  <Radio
                     key={`issue-type-${setting.issueType}`}
+                    as="div"
                     value={setting}
                     className={({ checked }) =>
                       classNames(
@@ -260,7 +261,7 @@ const CreateIssueModal = ({
                       )
                     }
                   >
-                    {({ active, checked }) => (
+                    {({ focus, checked }) => (
                       <>
                         <span
                           className={`${
@@ -268,7 +269,7 @@ const CreateIssueModal = ({
                               ? 'border-transparent bg-indigo-600'
                               : 'border-gray-300 bg-white'
                           } ${
-                            active ? 'ring-2 ring-indigo-300 ring-offset-2' : ''
+                            focus ? 'ring-2 ring-indigo-300 ring-offset-2' : ''
                           } mt-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full border`}
                           aria-hidden="true"
                         >
@@ -286,7 +287,7 @@ const CreateIssueModal = ({
                         </div>
                       </>
                     )}
-                  </RadioGroup.Option>
+                  </Radio>
                 ))}
               </div>
             </RadioGroup>