I don't know how and why I'm getting this error in React.

I'm trying to build this components:

    render() {
        return (
            <div>
                <div>ShopsList</div>
                {this.state.loading || !this.state.shops ? 
                    (
                        <div></div>
                    ) : 
                    (
                        <div>
                            {this.state.shops.map(shop=>Shop(shop))} # Line with the error
                        </div>
                    )
                }
            </div>
        )
    }

but the program won't compile and gives the following message:

This expression is not callable. Type '{ Shop: typeof Shop; }' has no call signatures

Shop is imported in the following way import Shop from '../Shop';

with the folder ../Shop having the following structure:

Shop/
       Shop.tsx
       index.tsx

and index.tsx has this content:

import Shop from "./Shop";
export default {Shop}

Shop has been defined in this way, which has a constructor:

import React from 'react';

export interface IShopProps {
    id: number;
    name: string;
    phone_number?: string;
}

class Shop extends React.Component<IShopProps, {}> {
    
    constructor(props: IShopProps) {
        super(props);
    }
    
    render() {     
        return (
            <div className='shopRow'>
                <div className='shopName'>{this.props.name}</div>
                <div className='shopNumber'>{this.props.phone_number ? this.props.phone_number : "numero non disponibile"}</div>
            </div>
        )
    }
};

export default Shop;

What am I doing wrong? I already tried looking up on SO for that message and I found this post, but to me it doesn't seem I have done the same error.

Edit: I also tried as suggested by @Viet:

{this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}

and still get the error:

JSX element type 'Shop' does not have any construct or call signatures. TS2604