How to render an asynchronous result (array) in a component in react?

Question

I have been doing js for about a month now, and I am writing this program where I am using clarifai API to see which celebrity a person on the photo resembles the most.

I want to pass the output as props to Rank component to render it, but I get the

Type error: clarifaiResults.map is not a function at App.transformResponse

Basically, the response I want to pass as props is the const clarifaiResults = response.outputs[0].data.regions[0].data.concepts[0].name; part that I get in console.log now

I am assuming it's because there is no output yet when the app tries to render the component, but I can't figure out what's wrong with the code. Thank you!

App.js

import React, { Component } from 'react';
import './App.css';
import SignIn from './Component/SignIn/SignIn.js';
import Register from './Component/Register/Register.js';
import Particles from 'react-particles-js';
import Logo from './Component/Logo/Logo.js';
import Navigation from './Component/Navi/Navigation.js';
import ImageLinkForm from './Component/Form/ImageLinkForm.js';
import Rank from './Component/Rank/Rank.js'
import Clarifai from 'clarifai';
import FaceRecognition from './Component/Face/FaceRecognition.js';
import FaceComparison from './Component/Comparison/FaceComparison.js';

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

const initialState = {
  input: "",
  imageUrl: "",
  results: [],
  route: "SignIn",
  user: {
    id: "",
    name: "",
    email: "",
    entries: 0,
    joined: "",
  },
};

const particleOptions = {
  particles: {
    number: {
      value: 40,
      density: {
        enable: true,
        value_area: 800,
      },

    }
      }
    }

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

    transformResponse = (response) => {
      const clarifaiResults = response.outputs[0].data.regions[0].data.concepts[0].name;
    
      const results = clarifaiResults.map((ingredient) => ({
        ingredients: ingredient.name,
        probablitiy: ingredient.value,
      }));

      this.setState({results: results.celebrityName});
    
      return {results: []};
    };

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

  }

  onSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
    .predict(
      Clarifai.CELEBRITY_MODEL,
      this.state.input)
      .then(response => {
        console.log(response.outputs[0].data.regions[0].data.concepts[0].name)
        if (response) {
          fetch ('http://loclhost:3000', {
            method: 'post',
            headers: {'Conent-Type' : 'application/json'},
            body: JSON.stringify({
              input: this.state.user.input
            })
          })
          .then((response) => response.json())
          .then(count => {
            this.setState(Object.assign(this.state.user, {entries:count}))
          })
        }
        this.transformResponse(response);
      })
      .catch(err => console.log(err));
        

      };  
         
      ;



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

  render() { 
    let { isSignedIn, imageUrl, route, results} = this.state;
    return (
      <div className="App">
            <Particles className='particles'
             params={particleOptions} 
             />
            <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
            { route ==='home'  
              ? <div>
                  <Logo />
                  <Rank 
                   results = {results}/>
                  <ImageLinkForm 
                    onInputChange={this.onInputChange} 
                    onSubmit={this.onSubmit}
                    />
                    <FaceRecognition 
                    imageUrl={imageUrl}    
                  />
                  <FaceComparison 
                    results = {results}
                  />
                </div>
              : (
                    route === 'SignIn' 
                  ? <SignIn onRouteChange={this.onRouteChange}/>
                  : <Register />
              )
               
            }
      </div>
    );
  };
}

export default App;

---

Rank.js

    import React from 'react';

const Rank = ({results}) => {
const prediction = results.map((result) => {
const {ingredients}  = result;
return (
    <div>
        <li className="celebrityName">{ingredients}</li>
    </div>
);
});

if (prediction && prediction.length>1) {
    return (
         <div>
            <div className='white f3'>
                You look a lot like...
                </div>
            <div className='white f1'>
            {results}
            </div>
        </div>
        );
    } else {
        return (
            <div>
        
        </div>
        )
    }
};

export default Rank;