setState element of array rewrite entire array

Question

I have simple structure:

interface IToast {
    text: string,
    setShow: Function,
    show: boolean,
}

const defaultToasts: IToast[] = [];
const [toasts, setToasts]: [IToast[], (toasts: IToast[]) => void] = useState(defaultToasts);

I want to add new element to existing array, but for some reason, after that:

let toast: IToast = {
    text: notification,
    setShow: () => { },
    show: true
}

setToasts([...toasts, ...toasts.concat(toast)]);

This item didn't get added properly to array, he rewrite entire array.

How can I do this?

UPDATED

I try @BrianThompson and @jared variant but it doesn't work for me, first element added correctly, but next one rewrite first. I think problem can be from defaulToasts, but not sure.

I use setState in useEffect hook, maybe problem come from this.

useEffect(() => {
    if (connection) {
        connection
                .start()
                .then(() => {
                    console.log("ready")
                    connection.on("ReceiveNotification", (notification) => {
                        console.log("New notification")
                        let toast: IToast = {
                                text: notification,
                                setShow: () => { },
                                show: true
                        }
                        setToasts([...toasts, toast]);
                    });
                })
                .catch((error) => console.log(error));
}, [connection]);