Props vs. State
Props are data handed in from the parent and never edited by the child. State is data the component owns, changes, and re-renders for.
See it
What it is
Props flow down and are read only inside the child: the parent decides them, the child renders them, and they change when the parent changes them. State lives inside a component, changes over time (a toggle, a text field, a fetch result), and setting it to a new value schedules a re-render (setting it to the value it already has usually costs nothing). Sort them by ownership rather than by whether they move: the caller owns props, the component owns state, and anything you can work out from props and state during render needs neither, so just compute it.
When two components need the same changing value, do not keep two copies. Lift state up to the nearest common parent, pass the value down as a prop, and pass a callback back up for changes. That is the whole controlled-component idea: the parent owns the value, the child reports intent.
Classic gotcha: initializing state from a prop, like 'const [name, setName] = useState(props.name)'. The snapshot is taken once and ignores every later prop change, so the UI goes quietly stale. Use the prop directly, derive the value during render, or give the component a key so it remounts when the prop changes.
Ask AI for it
Refactor this component so data ownership is explicit: keep values the parent decides as read-only props, keep only values this component itself changes in local state, and delete any state initialized from a prop. If two siblings need the same changing value, lift it to their common parent and pass value plus onChange down. Then list every piece of data with a one-line reason for calling it prop or state.