Component doesn't re-render when props change using useState hook

This is because when you do this:

const [panelsData, changePanel] = useState(data);

You're only using your data prop as the initial value of panelsData. When the props change, the new data will be ignored because panelsData has its own state (well, it's a useState hook!).

That's why you have to explicitly call changePanel to change the state. That's the whole idea!

If you want to observe the data prop and update the state accordingly, you could use a useEffect hook with data as dependency (that means, it'll run only when data changes), like this:

useEffect(() => {
  changePanel(data);
}, [data]);

Good luck!