Mantine Radio button displays incorrectly

I'm using Mantine v7.0.0 with Next.js v13.5.2 and Tailwind v3.3.3. When I create <Radio /> elements the svg of element is being displayed separately from radio button instead of replacing it. Which results in such behaviour:

Neither of black circles is clickable and adding/removing <RadioGroup> has no result. My component is:

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>
  )
}

And my package.json is:

{
  "name": "nextjstest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "run": "npm run dev"
  },
  "dependencies": {
    "@mantine/carousel": "^7.0.0",
    "@mantine/core": "^7.0.0",
    "@mantine/dates": "^7.0.0",
    "@mantine/form": "^7.0.0",
    "@mantine/hooks": "^7.0.0",
    "@mantine/next": "^6.0.21",
    "@types/node": "20.6.4",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
    "dayjs": "^1.11.10",
    "eslint": "8.50.0",
    "eslint-config-next": "13.5.2",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

Another thing to note: removing display:flex results in svg's being too ginormous to even fully display on the screen.

Unfortunately some Tailwind.css styles overrides some of Mantine components styles. Just remove import of tailwind base from globals.css

More details here from github discussion.