I am getting an invalid hook call error, can anyone help me to solve this! when importing a file from the package it shows the below error, but when using the same file in project dir it doesn't throw an 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

code

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;

but when I am using it as a separate file, it works

example

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;

this is in a separate file in the same dir

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;