Issue with React: Sibling component gets updated prop in console but doesn't render differently

Need help with my React-redux intermediate project.

Sharing the code sand box of the project with removed bloat.
Project: React-redux project

Problem: After the options in vehicles datalist(in a component within a parent component used multiple times) is rendered first time, it doesn’t reset/update for the next input section/component.


  1. MainSection component uses selector to show/hide 4 child components of same type ‘SelectionPanel’.
  2. Each SelectionPanel has an img element(redundant here) and a PlanetList and VehicleList components. PlanetList is given a method prop that changes Image according to selected Planet. VehicleList is given distance prop, selected according to selected planet(from child planet component). Panels given keys and tested to give children keys as well.
  3. PlanetList has input and datalist. Datalist options are updated successfully according to planets still not selected.
  4. VehicleList has input and datalist as well. Options updated, successfully first time but unsuccessfully next, according to vehicles left in inventory and if its range can reach the selected planet.

TL;DR - Multiple sibling components of same type. Their children components update if they don’t use props, but the one that uses intermediate prop doesn’t update/re-render with updated prop, even though prop changes in console.

Have tried useRef(), useEffect(), useState() for options, distanceToPlanet to no avail. Can’t figure out what the problem is.

Needed to make Datalist ID of child components dynamic, assigned by passed in props i.e. distanceToPlanet.