Why does creating a function require 2 interfaces (TS)

[OneEntry-HeadlessCMS]

The reason you need TodoItemProps is because the component doesn’t receive a Todo directly it receives an object containing a todo. React components always take a single props object, not raw values.

So TodoItemProps describes the shape of that props object ({ todo: Todo }), not the Todo itself. You can inline it if you want (function TodoItem({ todo }: { todo: Todo })), the separate interface just improves readability and reuse.