Необработанный отказ (TypeError): невозможно прочитать свойства неопределенного (чтение «протокола»)

введите описание изображения здесьЯ изучаю и следую учебному пособию по глубокому обучению, которое использует FastApi для предоставления моделей прогнозирования в приложение Reactjs.

Он возвращает ошибку журнала консоли: необработанный отказ (TypeError): невозможно прочитать свойства неопределенного (чтение «протокола»)

Запуск API: «http://localhost:8000» запуск myApp: «http://localhost:3000»

**Вот код реакции, чтобы сделать запрос API

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import uvicorn 
import numpy as np
from io import BytesIO
from PIL import Image
import tensorflow as tf
 
app = FastAPI()

origins = [
    "http://localhost", 
    "http://localhost:3000",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"], 
    allow_headers=["*"],
-MODEL = tf.keras.models.load_model("../saved-models/3")
CLASS_NAMES = ["Early Blight", "Late Blight", "Healthy"]

@app.get("/ping")
async def ping():
    return "hello"

def read_file_as_image(data) -> np.ndarray:
    image = np.array(Image.open(BytesIO(data)))  

** Вот код реакции для запроса API **

import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { Paper, CardActionArea, CardMedia, Grid, TableContainer, Table, TableBody, TableHead, TableRow, TableCell, Button, CircularProgress } from "@material-ui/core";
import cblogo from "./cblogo.PNG";
import image from "./bg.png";
import { DropzoneArea } from 'material-ui-dropzone';
import { common } from '@material-ui/core/colors';
import Clear from '@material-ui/icons/Clear';


export const ImageUpload = () => {
  const classes = useStyles();
  const [selectedFile, setSelectedFile] = useState();
  const [preview, setPreview] = useState();
  const [data, setData] = useState();
  const [image, setImage] = useState(false);
  const [isLoading, setIsloading] = useState(false);
  let confidence = 0;

  const sendFile = async () => {
    if (image) {
      let formData = new FormData();
      formData.append("file", selectedFile);
        let res = await axios({                         #here make the API request
        method: "post",
        url: process.env.REACT_APP_API_URL,
        data: formData,
      });
      if (res.status === 200) {
        setData(res.data);
      }
      setIsloading(false);
    }
  }   
    return image

@app.post("/predict")                        #Here is the prediction method
async def predict(fil: UploadFile = File(...)):
    image = read_file_as_image(await fil.read())
    img_batch = np.expand_dims(image, 0)             
    predictions = MODEL.predict(img_batch)           
    predicted_class = CLASS_NAMES[np.argmax(predictions[0])]
    confidence = np.max(predictions[0])
    return {
        'class': predicted_class,
        'confidence': float(confidence)
    }
    
if __name__ == "__main__":
    uvicorn.run(app, host='localhost', port=8000)