React Typescript conditional rendering using objects

export default function Products({state}:ProductsStateEnum):ReactElement {const [_ProductsState, setProductsState] = useState(state)  const ProductsState: { [key in ProductsStateEnum]: ReactElement } = {    loading: <Loader width={150} />,    failed: (      <div>          <Badge bg='danger'>Somethig Went Wrong</Badge>      </div>    ),    done: (      <>        {products?.map(          ({ id, title, image, description, category, price }) => (            <ProductCard              key={id}              id={id}              title={title}              description={description}              category={category}              price={price}              image={image}            />          )        )}      </>    )  }  return <div className='row p-3'>{ProductsState[_ProductsState]}</div>}