wProps updating in react dev tools but conditional jsx not rendering correctly

I’m having trouble understanding why my child component is not updating it’s conditional JSX from the renderFace method despite the prop values being updated in react dev tools and the value of the element being targeted also updating (“data-icon” value in photos 3&4).

initial null value of fetched props

populated prop values after fetched data

initial prop value

updated prop value after state is fetched / updated

As you can see from the photos the data is updating in the dev tools but the frown doesn’t turn upside down despite props value updating.

SearchBar is the child component of App

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      businesses: []
    };
  }

searchYelp(term, location, sortBy) {
    Yelp.search(term, location, sortBy).then(businesses => {
      this.setState({businesses: businesses});
    });
  }

  render() {
    return (
      <div className="App">
        <SearchBar 
          businesses={this.state.businesses} 
          searchYelp={this.searchYelp.bind(this)} />
      </div>
    );
  }
}

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

  this.renderFace = this.renderFace.bind(this);
 }

 renderFace(){
    return (
    this.props.businesses == 0
      ? <h1>Hangry <span className="iconify" data-icon="clarity:sad-face-solid" data-inline="false"></span></h1>
      : <h1>Hangry <span className="iconify" data-icon="bx:bxs-happy-alt" data-inline="false"></span></h1>
    )
  }

handleSearch(event) {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    event.preventDefault();
  }

 componentDidUpdate(){
    this.renderFace();
  }

 return (
      <div className="SearchBar">
        {this.renderFace()} 
      </div>
 )

}

Answer

I debugged the problem down to determining if it was a logic issue or a library / src issue. I typed in some text which changed when the props were updated, inferring the issue was coming from the API. Installed the independent dependencies for the icons and it worked.

npm install --save-dev @iconify/react @iconify-icons/heroicons-outline
import { Icon, InlineIcon } from '@iconify/react';
import emojiHappy from '@iconify-icons/heroicons-outline/emoji-happy';