How to update the value of a prop upon a state change in React

I have a parent React component (MainComponent) that renders a child component (theKeyComponent) and passes a constant as a prop (myID). The parent component also tracks the state ‘activeLink’.

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }
  render(){
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return(){
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   }
  }
}

Here’s a bit from inside the KeyComponent

export default class HelpScoutBeacon extends React.Component {
  static propTypes = {
    myID: PropTypes.string.isRequired
  }
  componentDidMount() {
    myAPImethod('init', this.props.myID);
  } 
  render(){return(){}}
}

I want to change the value of the constant myID depending on the value of ‘activeLink’. This is not a problem when both components are mounted for the first time. However, when the value of ‘activeLink’ changes ‘myID’ doesn’t change since the child component is already mounted.

I’m struggling to see what would be the ‘React way’ of doing this. Should ‘myID’ be set as another state and the function that sets the state for activeLink should include another one to set the state of myID? Or is this overcomplicating things and there’s an easier way to re-render only that particular child component so that it considers the new value of myID.

I’m new to React so I was hoping I could get some clarification form SO community.

componentDidUpdate() {
    myAPImethod('init', this.props.myID);
} 

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }

 static getDerivedStateFromProps(props, state) {
    if (props.activeLink !== state.activeLink ) {
      // updating the state here if there are any changes in props.
      return {
        activeLink: props.activeLink,
      };
    }

    // Return null if the props hasn't changed
    return null;
    }

 render(){
  // now, here your state is updated. 
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return (
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   )
  }