React Hook 'useEffect' is called in function报错解决

// App.js
import React, {useEffect, useState} from 'react';
// 👇️ Not a component (lowercase first letter)
// not a custom hook (doesn't start with use)
function counter() {
  const [count, setCount] = useState(0);
  // ⛔️ React Hook "useEffect" is called in function "counter" that
  // is neither a React function component nor a custom React Hook function.
  // React component names must start with an uppercase letter.
  // React Hook names must start with the word "use".
  useEffect(() => {
    console.log(count);
  }, [count]);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// App.js
import React, {useEffect, useState} from 'react';
// 👇️ is now a component (can use hooks)
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

import React, {useEffect, useState} from 'react';
// 👇️ is a custom hook (name starts with use)
function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);
  return [count, setCount];
}
export default function App() {
  const [count, setCount] = useCounter();
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}