custom react hook is not a function using useState?

Question

I have this custom hook

const useShowBg = () => {
  const [showBg, useShowBg] = useState(false);

  return [showBg, useShowBg];
};

export default useShowBg;

I import it in a component and use it like so

import myHook from './myHook';

const App = () => {
    const [showBg, useShowBg] = myHook

    return (
      <div>
      <button onClick={() => useShowBg(true)}>show</button>
        {showBg && <p>
          Start editing to see some magic happen :)
        </p>}
      </div>
    );

}

I got useShowBg is not a function error when I click to fire the function? something is wrong?

demo https://stackblitz.com/edit/react-qomaiu?file=index.js

Answer 1

you forgot to invoke your hook

const [showBg, useShowBg] = myHook()