This code throws the above-mentioned error. I tried destructuring the array too but it displays some other error tried every possible way to fix it but failed. Any help will be appreciated.

import React, { Component } from "react";
import Shop_Data_List from "./shopData";
import ShopPreview from "./shopPreview";

class Shop extends Component {

    constructor(props) {
        super(props);

        this.state = {
            collections: Shop_Data_List
        };
    }

render(){
    const {collections} = this.state;
    return(
        <div>
            <h1>Shop Is Open</h1>
            <div>
                {
                    collections.map(({id, title, items}) => (
                      <ShopPreview key={id}  />  
                    ))
                }
            </div>

        </div>
    );
}
}




const ShopPreview = ({title, items}) => {
    <div className="Wrapper"> 
        <div className="title">Title</div>
        <div className="lreview">
            {items.map((item) =>(<div key={item.id}>{item.name}</div>))}
        </div>
    </div>
}

export default ShopPreview;