diff --git a/packages/odyssey-react-mui/src/RadioGroup.tsx b/packages/odyssey-react-mui/src/RadioGroup.tsx index 8cb2dd2ea2..3fdc1391d3 100644 --- a/packages/odyssey-react-mui/src/RadioGroup.tsx +++ b/packages/odyssey-react-mui/src/RadioGroup.tsx @@ -18,6 +18,7 @@ import { Radio, } from "./"; import { RadioGroup as MuiRadioGroup } from "@mui/material"; +import { useMemo } from "react"; export interface RadioGroupProps { /** @@ -65,11 +66,20 @@ export const RadioGroup = ({ children, defaultValue, }: RadioGroupProps) => { - // Setting ariaDescribedBy this way to avoid linter's prefer-const error - const ariaDescribedBy = [ - hint && `${name}-hint`, - error && `${name}-error`, - ].filter(Boolean); + const radioGroupProps = useMemo( + () => + error || hint + ? { + "aria-describedby": [ + hint && `${name}-hint`, + error && `${name}-error`, + ] + .filter(Boolean) + .join(" "), + } + : undefined, + [error, hint] + ); return ( @@ -78,7 +88,7 @@ export const RadioGroup = ({ {children}