diff --git a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
index a694693fbe..0243cdd944 100644
--- a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
+++ b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ComponentProps, useMemo, useRef } from 'react'
+import React, { ComponentProps, useCallback, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Base } from '../Base'
@@ -10,7 +10,7 @@ type Props = ComponentProps<typeof RadioButton> & {
   as?: string | React.ComponentType<any>
 }
 
-const MEANLESS_TAG_NAMES = ['div', 'span']
+const MEANLESS_TAG_NAME_REGEX = /^(div|span)$/
 
 const radioButtonPanel = tv({
   base: [
@@ -32,24 +32,22 @@ const radioButtonPanel = tv({
 export const RadioButtonPanel: React.FC<Props> = ({ onClick, as, className, ...props }) => {
   const styles = useMemo(
     () => radioButtonPanel({ disabled: !!props.disabled, className }),
-    [className, props.disabled],
+    [props.disabled, className],
+  )
+  const role = useMemo(
+    () => (MEANLESS_TAG_NAME_REGEX.test(as ? `${as}` : '') ? 'presentation' : undefined),
+    [as],
   )
 
   // 外側の装飾を押しても内側のラジオボタンが押せるようにする
   const innerRef = useRef<HTMLInputElement>(null)
-  const handleOuterClick = () => {
+  const handleOuterClick = useCallback(() => {
     innerRef.current?.click()
-  }
+  }, [innerRef.current])
 
   return (
     // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation
-    <Base
-      padding={1}
-      role={MEANLESS_TAG_NAMES.includes(`${as || ''}`) ? 'presentation' : undefined}
-      onClick={handleOuterClick}
-      as={as}
-      className={styles}
-    >
+    <Base padding={1} role={role} onClick={handleOuterClick} as={as} className={styles}>
       <RadioButton {...props} ref={innerRef} />
     </Base>
   )