Use a ref to focus an <input> programmatically on mount. Why are refs the right tool here instead of state?

A parent wants to focus an <input> that lives inside a custom <TextField> component. Use forwardRef so the parent's ref reaches the underlying input.

Use useImperativeHandle to expose a controlled API (focus, clear) from <TextField> instead of leaking the raw DOM node. Why is this safer than handing out the input directly?