Chakra UI toast transparent when it should have color

Question

I'm using chakra ui toast component and one of my toasts are using the loading status, but the problem is that only the error and success have color, the other status(loading, info and warning) are being transparent, and I don't know why. I tried to see if was the browser theme the problem, but even with dark or light theme, it still transparent. Can someone help me??

'use client'
import {
  Button,
  Checkbox,
  Flex,
  FormControl,
  FormLabel,
  Heading,
  Input,
  Link,
  Stack,
  Image,
  Hide,
  useToast,
  useColorModeValue
} from '@chakra-ui/react';

import ButtonBlue from '@/components/ButtonBlue';
import { FormEvent, FunctionComponent, useState } from 'react';
import { redirect, useRouter } from 'next/navigation';
import axios from 'axios';
import { useAuth } from '@/services/AuthContext';

interface ILoginProps {
  email: string,
  password: string
}
const Login: FunctionComponent<ILoginProps> = () => {
  const toast = useToast()
  const toastVariant = useColorModeValue("subtle", "solid");
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const { login } = useAuth();

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const data = {
      email,
      password,
    }
    console.log(data)
    toast({
      title: 'Aguarde',
      status: 'loading',
      duration: 5000,
      isClosable: true,
    })
    try {
      const res = await login(email, password);
      toast({
        title: 'Login',
        description: res.data.message,
        status: 'success',
        duration: 5000,
        isClosable: true,
      })

      router.push('/');
    } catch (error: unknown) {
      if (axios.isAxiosError(error)) {
        const errorMessage = error?.response?.data?.error || 'Erro desconhecido';
        toast({
          title: 'Erro.',
          description: errorMessage,
          status: 'error',
          duration: 5000,
          isClosable: true,
        });
      } else if (error instanceof Error) {
        toast({
          title: 'Erro.',
          description: error.message,
          status: 'error',
          duration: 5000,
          isClosable: true,
        });
      }
    }
  }

  return (
    <Stack minH={'92vh'} maxHeight={'92vh'} overflowY={'hidden'} direction={{ base: 'column', md: 'row' }}>
      <Hide below='md'>
        <Flex flex={1}>
          <Image
            alt={'Login Image'}
            objectFit={'cover'}
            src={
              'https://images.unsplash.com/photo-1543746746-46047c4f4bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'
            }
          />
        </Flex>
      </Hide>
      <Flex p={8} flex={1} align={'center'} justify={'center'}>
        <Stack spacing={4} w={'full'} maxW={'md'}>
          <form onSubmit={handleSubmit}>
            <Heading fontSize={'2xl'}>Login</Heading>
            <FormControl isRequired id="email">
              <FormLabel>Email</FormLabel>
              <Input type="email" onChange={(e) => setEmail(e.target.value)} />
            </FormControl>
            <FormControl isRequired id="password">
              <FormLabel>Senha</FormLabel>
              <Input type="password" onChange={(e) => setPassword(e.target.value)} />
            </FormControl>
            <Stack spacing={6}>
              <Stack
                direction={{ base: 'column', sm: 'row' }}
                align={'start'}
                justify={'space-between'}>
                {/* <Checkbox>Remember me</Checkbox>*/}
                <a href={"/login/esqueceu-a-senha"} >Esqueceu a senha?</a>
              </Stack>
              <Stack spacing={6} direction={['column', 'row']}>
                <ButtonBlue href={'/cadastro'}
                >
                  Cadastre-se
                </ButtonBlue>
                <Button
                  w="full"
                  type='submit'>
                  Entrar
                </Button>
              </Stack>
            </Stack>
          </form>
        </Stack>
      </Flex>
    </Stack>
  );
}
export default Login