TypeError: data.outputs is undefined

i have added my detect face Clarifai API key to the backend so that the autorization code(API) won't show up in the console, and now It stopped detecting all the faces I'm getting the below error message in the console

TypeError: data.outputs is undefined
    calculateFaceLocation App.js:49
    onButtonSubmit App.js:95
    promise callback*./src/App.js/</App/this.onButtonSubmit App.js:72
    React 23
    js index.js:8
    js main.chunk.js:2298
    Webpack 7

see backend below

const express = require('express');
const bodyParser = require('body-parser');
const bcrypt = require('bcrypt-nodejs');
const cors = require('cors');
const knex = require('knex');

const register = require('./controllers/register');
const signin = require('./controllers/signin');
const profile = require('./controllers/profile');
const image = require('./controllers/image');




const db = knex({
    client: 'pg',
    connection: {
        host : '127.0.0.1',
        user : 'postgres',
        port: 5432,
        password : 'Moshe6700',
        database : 'smart-brain'
    }
});



const app = express();


app.use(bodyParser.json())
app.use(cors())

app.get('/', (req, res) => {res.send(database.users) })
app.post('/signin',  (req, res) => {signin.handleSignin(req, res, db, bcrypt)})
app.post('/register',  (req, res) => {register.handleRegister(req, res, db, bcrypt)})
app.get('/profile/:id', (req, res) => {profile.handleProfile(req, res, db)})
app.put('/image', (req, res) => {image.handleImage(req, res, db)})
app.post('/imageurl', (req, res) => {image.handleApiCall(req, res)})





app.listen(3001, () => {
    console.log('app is running on port 3001')
})

image.js in the backend

const Clarifai = require('clarifai');

const app = new Clarifai.App({
  apiKey: '489560069986431e89aa152fe709ba94'
});

const handleApiCall = (req, res) => {
    app.models
   .predict(Clarifai.FACE_DETECT_MODEL, req.body.input)
   .then(data => {
    res.json(data);
   })
   .catch(err => res.status(400).json('unable to work with API'))
}



const handleImage = (req, res, db) => {
    const { id } = req.body;
    db('users').where('id', '=', id)
    .increment('entries', 1)
    .returning('entries')
    .then(entries => {
        res.json(entries[0].entries)
    })
    .catch(err => res.status(400).json('unable to get entries'))
  }

  module.exports = {
    handleImage:handleImage,
    handleApiCall:handleApiCall
  }

frontend code

import React, {Component} from 'react';
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
import Rank from './components/Rank/Rank';
import Signin from './components/Signin/Signin';
import Register from './components/Register/Register';
import './App.css';




const intialState = {
   
      input: '',
      imageUrl: '',
      box: {},
      route: 'signin',
      isSignedIn: false,
      user: {
        id: '',
        name: '',
        email: '',
        entries: 0,
        joined: ''
      }
    }


class App extends Component {
  constructor() {
    super();
    this.state = intialState
  }

  loadUser = (data) => {
    this.setState({user: {
      id: data.id,
      name: data.name,
      email: data.email,
      entries: data.entries,
      joined: data.joined
    }})
  }


  calculateFaceLocation =(data) => {
    console.log(data)
   const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
   const image = document.getElementById('inputimage');
   const width = Number(image.width);
   const height = Number(image.height);
   return {
    leftCol: clarifaiFace.left_col * width,
    topRow: clarifaiFace.top_row * height,
    rightCol: width - clarifaiFace.right_col * width,
    bottomRow: height - clarifaiFace.bottom_row * height,
  }
}

displayFaceBox = (box) => {
  console.log(box)
  this.setState({box: box});
}

onInputChange = (event) => {
  this.setState({input: event.target.value})
}

onButtonSubmit = () => {
  this.setState({imageUrl: this.state.input})
   fetch('http://localhost:3001/imageurl', {
        method: 'post',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          input: this.state.input
        })
      })
   .then(response => response.json())
  .then( response => {
    if (response) {
      fetch('http://localhost:3001/image', {
        method: 'put',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          id: this.state.user.id
        })
      })
      .then(response => response.json())
      .then(count => {
        this.setState(Object.assign(this.state.user, { entries: count}))
      })
      .catch(console.log)
    }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
  .catch(err => console.log(err));

}

onRouteChange = (route) => {
  if (route === 'signout') {
    this.setState(intialState)
  } else if (route === 'home') {
    this.setState({isSignedIn: true})
  }
  this.setState({route:route});
}




render() {
  return (
    <div className="App">
     

    <Navigation isSignedIn={this.state.isSignedIn} onRouteChange={this.onRouteChange} />
    { this.state.route === 'home' 
    ? <div>
    <Logo />
    <Rank 
    name={this.state.user.name} 
    entries={this.state.user.entries}/>
    <ImageLinkForm  
    onInputChange={this.onInputChange}
    onButtonSubmit={this.onButtonSubmit} />
    <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
    </div>
    :(
      this.state.route === 'signin'
      ?<Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
      :<Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
      )


    
  }
  </div>
  );
}
}

export default App;

Any ideas why this is happening?