Controlled Component:

Unlike the uncontrolled component, the input form element in the controlled component is handled by the component rather than the DOM. It takes its current value through props. The changes are notified through callbacks.

Uncontrolled component:

Similar to the traditional HTML form inputs, the uncontrolled component can be written using a ref to get form values from the DOM. Thus there is no need to write an event handler for every state update and the HTML elements maintain their own state that will be updated when the input value changes.

Sources:

Difference between Controlled and Uncontrolled. (2022, August 7). W3schools. w3schools.blog/difference-between-controlle..