I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can be visualized here: https://i.stack.imgur.com/preCE.png
Neither of the black circles are clickable and even adding or removing the <RadioGroup> component does not yield any results.
The code for my component is as follows:
import { MantineProvider, Radio, RadioGroup} from "@mantine/core";
export default function Home() {
return (
<MantineProvider>
<RadioGroup className={"flex"}>
<Radio name={"123"} value={"email"} label={"Email"} />
<Radio name={"123"} value={"phone"} label={"Phone"} />
</RadioGroup>
</MantineProvider>
)
}
In addition, below is the content of my package.json:
{
"name": "nextjstest",
"version": "0.1.0",
"private": true,
[ ...remaining package.json content... ]
}An important point to mention: if I remove the display:flex property, the svg images become excessively large and do not fully fit on the screen.