DDD in react.ts

export interface IUseCase<TRequest, TResponse> {
    execute(request?: TRequest): Promise<TResponse>
}

class AddProductToOrderUseCase implements IUseCase<Identifier, Promise<void>> {
  protected productRepository: IProductRepository;
  protected orderRepository: IOrderRepository;
  
  async execute(productId: Identifier) {
      const order = await this.orderRepository.getCurrent();
      const product = await this.productRepository.getById(productId);
      
      order.addProduct(product);
      
      await this.orderRepository.save(order);
  }
}

class GetMenuProductsUseCase implements IUseCase<void, Promise<Product[]>> {
     protected productRepository: IProductRepository;
     
     async execute() {
        const products = await this.productRepository.getAll();
        
        return products.map(ProductMapper.toDTO);
     }
}

const useDraftOrder = () => {
  const [products, setProducts] = useState([]);
  
  const orderRepository = new ReduxDraftOrderRepository(store);
  const productRepository = new ReduxProductRepository(store);
  const addProductToOrderUseCase = AddProductToOrderUseCase(orderRepository, productRepository);
  const getMenuProductsUseCase = GetMenuProductsUseCase(productRepository);
  
  useEffect(() => {
   getMenuProductsUseCase.execute().then(setProducts).catch(() => {})
  }, []);

  const onAddProduct = (productId: string) => addProductToOrderUseCase.execute(productId);
  
  return [products, onAddProduct];
}

const OrderView = () => {
  const [products, onAddProduct] = useDraftOrder();
  
  const renderItem = (props) => {
    <div>{props.item.name}<button onClick={() => onAddProduct(props.item.id)}></button></div>
  }

  return (
     <div>
        <FlatList renderItem={renderItem}/>
     </div>
  );
}