Mantine theme color might be undefined

LoginForm.js

import {
  Anchor,
  Button,
  Container,
  Group,
  Notification,
  Paper,
  Text,
  useMantineTheme,
} from "@mantine/core"
import login from "app/auth/mutations/login"
import { LoginSchema } from "app/auth/validations"
import { Form, NextLink } from "app/core/components"
import { MantineTextField } from "app/core/components/MantineTextField"
import { Routes, useMutation } from "blitz"
import { useState } from "react"

type LoginFormProps = {
  onSuccess?: () => void
}

export const LoginForm = (props: LoginFormProps) => {
  const [loginMutation] = useMutation(login)
  const [showNotification, setShowNotification] = useState(false)
  const theme = useMantineTheme()

  console.log(theme)

  return (
    <Container size={400}>
      <h1>Login</h1>

      {showNotification && (
        <Notification
          style={{ marginBottom: "1rem" }}
          color="red"
          onClose={() => {
            setShowNotification(false)
          }}
        >
          Incorrect username or password.
        </Notification>
      )}

      <Paper
        padding="xs"
        style={{
          paddingTop: "1.5rem",
          paddingBottom: "1rem",
          border:
            "1px solid" +
            (theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]),
        }}
      >
        <Container>
          <Form
            schema={LoginSchema}
            onSubmit={async (values) => {
              console.log("try")
              try {
                await loginMutation(values)
                props.onSuccess?.()
              } catch (error) {
                setShowNotification(true)
              }
            }}
          >
            <MantineTextField name="email" label="Email address" id="email-id" />

            <MantineTextField
              type="password"
              name="password"
              label="Password"
              id="password-id"
              style={{ marginTop: 15 }}
            />

            <Group position="apart" style={{ marginTop: 25 }}>
              <Button
                variant="link"
                href={Routes.ForgotPasswordPage()}
                component={NextLink}
                color="gray"
                size="sm"
              >
                Forgot your password?
              </Button>

              <Button type="submit">Login</Button>
            </Group>
          </Form>
        </Container>
      </Paper>

      <Text color="gray" size="sm" align="right" style={{ marginTop: "1rem" }}>
        New here?&nbsp;
        <Anchor size="sm" variant="link" href={Routes.SignupPage()} component={NextLink}>
          Create an account.
        </Anchor>
      </Text>
    </Container>
  )
}

export default LoginForm

Solved by setting noUncheckedIndexedAccess to false in tsconfig.config