Toast component being called without pressing button

[vmorales-2920]

Hi all, I need to create a component where it executes the Toast component the moment the component is called
This is my component

toast.tx

`
"use client";
import React, { useEffect } from 'react';
import { addToast, Button, ToastProvider } from "@heroui/react";
import "../../app/globals.css";

      interface IProps {
          title: string;
          description: string;
          type: "success" | "danger" | "warning" | "default";
      }
      
      export default function CustomToast({ title, description, type }: IProps) {
          useEffect(() => {
              addToast({
                  title,
                  description,
                  color: type,
                  timeout: 5000,
                  variant: "solid",
                  radius: "sm",
              });
          }, [title, description, type]);
      
          return (
              <>
                  <ToastProvider placement={"top-right"} toastOffset={60} />
                  <div className="flex flex-wrap gap-2">
                      <Button
                          className=""
                          onPress={() => {
                              addToast({
                                  title,
                                  description,
                                  color: type,
                                  timeout: 5000,
                                  variant: "solid",
                                  radius: "sm",
                              })
                          }}
                      >
                      </Button>
                  </div >
              </>
          );
      }

`
I've been trying to execute the toast with an useEffect but is not showing the Toast component. Does someone has try to use the Toast component like this?

Just for information, I'm using NextJS 14 and I have also added the ToastProvider in the HeroUIProvider

Thanks