No sé cómo y por qué recibo este error en React.

Estoy tratando de construir estos componentes:

 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> ) }

pero el programa no compila y da el siguiente mensaje:

Esta expresión no es invocable. Escriba '{ Tienda: tipo de Tienda; }' no tiene firmas de llamada

La Shop se importa de la siguiente manera import Shop from '../Shop';

con la carpeta ../Shop teniendo la siguiente estructura:

 Shop/ Shop.tsx index.tsx

e index.tsx tiene este contenido:

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

La tienda se ha definido de esta manera, que tiene un 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;

¿Qué estoy haciendo mal? Ya intenté buscar ese mensaje en SO y encontré esta publicación, pero no me parece que haya cometido el mismo error.

Editar: también probé según lo sugerido por @Viet:

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

y sigue saliendo el error:

El tipo de elemento JSX 'Tienda' no tiene ninguna construcción ni firma de llamada. TS2604