The full message reads “Invalid hook call. Hooks can only be called inside of the body of a function component.” React lists three possible reasons and all three genuinely occur: the rules of hooks were broken in the component, the React and ReactDOM versions do not match, or, the sneakiest, the application is running two copies of React at once, and the component is calling hooks on a different copy than the renderer is using. The fix depends on which of the three it is, and they are easy to tell apart.
npm ls react) and look for two versions, common in monorepos, linked packages (npm link), and libraries that bundle their own React.react and react-dom must be the same version, and a library's peer React must match the app's copy.node_modules/react, and in monorepos hoist or alias so exactly one React resolves. Verify with npm ls react showing a single version.react and react-dom to the identical version and reinstall cleanly; a stale lockfile or a half-applied upgrade is the usual origin.Why does it happen only when I use my own component library? The library is the classic duplicate-React source: it was installed or linked with its own copy of React in its node_modules, so its components talk to one React while the app's renderer talks to another. Peer dependencies plus dedupe at install time is the standard cure.
Can hooks be called in a custom hook? Yes, custom hooks are the second legal place, provided the custom hook itself is called unconditionally at the top level of a component or another custom hook.
The error appeared after adding a hook to a working component, why? If the hook was added inside a condition, after an early return, or in an event handler, renders now disagree about hook order or the call happens outside rendering entirely. Keep hooks above any return and outside any branch.