I am working on an app and am having issues with Component C not recognizing a prop change from Component A. I have to pass the prop from Component A to Component B, and then down to Component C.

I removed a bunch of code from the snippets because these components are 400+ lines.

Component A looks like:

selectPeripheral = (peripheral, index) => {
    console.log(peripheral) 

    // what peripheral looks like
    // {"id":"27646F75-4D53-834F-BF94-4F1B975626CD","name":"LEDDMX-013176"}
    // or 
    // {"id":"8371C1D0-1F5A-EB7E-C83C-193A7BC26F7F","name":"LEDBLE-061E8A"}

    this.props.navigation.navigate('ColorPickerIndex', {
        screen: 'ColorPicker',
        params: {
            selectedPeripheral: peripheral
        },
    });
}

render() {
  {
    this.state.nearbyDevices.map((peripheral, index) => {
      return  <TouchableOpacity 
                key={`key-${index}`} 
                onPress={() => this.selectPeripheral(peripheral, index)}
               >
                  <Text>{peripheral.name}</Text>
                  <Text>LED light</Text>
               </TouchableOpacity>
     })
  }
}

Component B:

class ComponentB extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedLight: this.props.route.params.peripheral
        }
}

render() {
  <ComponentC
      selectedPeripheral={this.state.selectedLight}
  />
}

Component C looks like:

const ComponentC = ({ selectedPeripheral }) => {

   return(
       <Text>{selectedPeripheral.name}</Text>
   )
}

This works only for the first peripheral. When I select a different peripheral, component C still shows the the first peripheral selected and not the different peripheral.

What can I do to update Component C with the new peripheral?