State variables not updating and I so not know why ReactJS

In 5 years working with React I've yet to find a compelling case for using getDerivedStateFromProps function. Why not just this.call(this.props.stoneData.id); in componentDidMount? It's anti-pattern to store passed props in local state in React anyway, so this is actually the preferred use.

class ItemDetails extends Component {
  state = {
    initData: {},
    stoneData: {},
    stoneSupply: {}
  }

  async call (index) {
    console.log('call.index: ' + index);
    try {
      const supply = await getSupplyInfoForStoneType(index);
      this.setState({
        stoneSupply: supply
      });
    } catch (err) {
      console.log(err);
    }
  }

  componentDidMount(){
    console.log('componentDidMount()');
    this.setState({
      initData: initData,
      stoneData: this.props.stoneData, // if you must
    })

    this.call(this.props.stoneData.id);
  }

  render() {
    console.log('render.this.state.stoneData.id: ' + this.state.stoneData.id);

    return ( ...... );
  }
}

export default ItemDetails;