I'm using redux toolkit to add a object to my array , for that i'm dispatching a function but i'm getting this error (i'm importing data into my details file by help of state and params):

" Details.js:16 Uncaught RangeError: Maximum call stack size exceeded at addToCart (Details.js:16:1) "

here is my details file

import {react,useEffect} from 'react';
import { useParams } from 'react-router-dom';
import {useDispatch,useSelector} from 'react-redux';
import {getProduct,addtocart} from '../features/productSlice'


function Details(){
    const params = useParams();
    const dispatch = useDispatch();

    useEffect(()=>{
        dispatch(getProduct(params.id))
    },[])

    function addToCart(){
        dispatch(addToCart(id));
    }

    const productdetail = useSelector((state)=> state.myproduct.product)
    const {title,image,description,price,id}= productdetail;

   console.log(params)
    return(
        <>
        <div className='container'>
             <img src={image}/>
            <h1>{title}</h1>
            <h5>{description}</h5>
            <h4>{price}</h4> 
        </div>
        <button 
            className='btn btn-warning'
            onClick={()=>{addToCart({id}) } 
        }
            > Add to cart </button>
         </>
    )
}

export default Details;

and here is my portion of Slice

    const productSlice = createSlice({
        name:"myproduct",
        initialState,
        reducers:{
            getProduct:(state,action)=>{
                state.product = state.products.find((el) => el.id == action.payload)
            },
            addtocart:(state,action)=>{
                state.cart = state.cart.push(action.payload)
            },
            removefromcart:(state,action)=>{
                state.cart = action.payload
            }
        },