How do I enable hover for children of FormItem?

[sp88011]

How do I enable hover:cursor-pointer for an entire FormItem? If I put it on<FormItem> the <FormLabel> does not have a hover.. if I put it there too, my cursor flashes as I move it on/off the FormLabel... sorry, this must be a basic question. Looking for best practices here... thank you!

<FormField
                  control={form.control}
                  name="type"
                  render={({ field }) => (
                    <RadioGroup
                      onValueChange={field.onChange}
                      //defaultValue={field.value}
                      className="flex flex-col space-y-1"
                    >
                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                        <div className="space-y-0.5">
                          <FormLabel className="text-base">Item A</FormLabel>
                          <FormDescription className="font-normal text-muted-foreground">
                            Description
                          </FormDescription>
                          <FormControl>
                            <RadioGroupItem value="restricted_tokens" hidden />
                          </FormControl>
                        </div>
                      </FormItem>

{/* more FormItems... */}