Recibo un error de llamada de gancho no válido, ¿alguien puede ayudarme a resolver esto? al importar un archivo del paquete, muestra el siguiente error, pero al usar el mismo archivo en el directorio del proyecto, no arroja ningún error.

error

 react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

código

 import './App.css'; import { useToggle } from "use-custom-hooks"; // import useToggle from "./useToggle" const Mood = () => { const [isHappy, toggleIsHappy] = useToggle(true); return ( <div> <h1>Hello World</h1> <p>{`The user is ${isHappy ? "Happy 😃" : "Sad 😢"}`}</p> <button onClick={toggleIsHappy}>Toggle</button> </div > ); }; function App() { return ( <div className="App"> <header className="App-header"> <Mood /> </header> </div> ); } export default App;

pero cuando lo estoy usando como un archivo separado, funciona

ejemplo

 import './App.css'; import useToggle from "./useToggle" const Mood = () => { const [isHappy, toggleIsHappy] = useToggle(true); return ( <div> <h1>Hello World</h1> <p>{`The user is ${isHappy ? "Happy 😃" : "Sad 😢"}`}</p> <button onClick={toggleIsHappy}>Toggle</button> </div > ); }; function App() { return ( <div className="App"> <header className="App-header"> <Mood /> </header> </div> ); } export default App;

esto está en un archivo separado en el mismo directorio

 import { useState } from 'react'; /** * * Custom hook which returns a boolean state and a state toggle function. * * @param {boolean} initialValue Initial value of the state. * @returns {Array} Array containing boolean state and a state toggle function. */ const useToggle = (initialValue) => { const [value, setValue] = useState(initialValue); const toggleValue = () => { setValue((currentValue) => !currentValue); }; return [value, toggleValue]; }; export default useToggle;