Mantine DatePickerInput组件渲染异常问题求助

我在React项目中使用Mantine的DatePickerInput组件时遇到了渲染异常：

• 预期效果：正常的带日期选择图标的输入框，布局整齐，图标与输入内容位置合理
• 当前实际效果：输入框内部元素错位，样式混乱，图标和输入内容的排版不符合组件默认样式

使用的库版本：

"react": "^18.2.0",
"@mantine/core": "^7.1.7",
"@mantine/dates": "^7.1.7",

组件实现代码：

<DatePickerInput
  name={name}
  placeholder={placeholder}
  ref={ref}
  value={value}
  onChange={e => onChange(e ?? undefined)}
  clearable
  error={error?.message}
  {...otherProps}
/>

我已经排查过是否存在CSS样式冲突，也尝试将Mantine版本降级至7.1.0，但问题仍然没有解决。

内容的提问来源于stack exchange，提问作者Deepit Patil