Any wrapper element around the Chip component causes an error.

[anyebojue]

Steps to reproduce

const renderActionButtons = (row: PropertyCompanyReply) => {
const actions = [
{ title: 'manageAccounts', action: 'manageAccounts' },
{ title: 'edit', action: 'edit' },
{ title: 'delete', action: 'delete' },
{ title: 'login', action: 'login' },
{ title: 'block', action: 'block' },
{ title: 'restartAlt', action: 'restartAlt' }
]
return (
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 0.5,
justifyContent: 'center',
alignItems: 'center'
}}
>
{actions.map(({ title, action }) => (
<Chip
key={title}
sx={{
cursor: 'pointer',
width: 'calc(33.33% - 8px)',
'& .MuiChip-label': {
fontSize: '13px'
}
}}
label={title}
color="primary"
variant="outlined"
onClick={() => handleActionClick(action, row)}
/>
))}

)
}

Any wrapper element around the Chip component causes an error.
hook.js:608 Warning: React does not recognize the touchRippleRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase touchrippleref instead. If you accidentally passed it from a parent component, remove it from the DOM element. Error Component Stack.

“When I don’t add a wrapper component, there is no error, but when I add it, the error occurs. This happens regardless of whether it’s or any other tag. The error happens with the following MUI X version: @mui/material: "^6.4.3".”
https://mui.com/material-ui/react-chip/

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

Search keywords: Chip

[aarongarciah]

@anyebojue please provide a reproduction.

[anyebojue]

@anyebojue请提供复制品。

https://codesandbox.io/p/sandbox/empty-cloud-gp5473