This behaviour is from React 18 itself when you are in strict mode in development. The core team is trying to implement this feature where we can preserve components' state even after unmount. useEffect getting called twice is related to this feature. Here is an overview of what they say in the documentation:

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state.

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component.

On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.

This only applies to development mode, production behavior is unchanged.

However if you need to, for example in your case where you want the useEffect's callback to execute only when a state changes, you can use a boolean ref using useRef to add some additional controls, like so:

import  { useState, useEffect, useRef } from "react";

const Counter = () => {
  const firstRenderRef = useRef(true);
  const [count, setCount] = useState(5);

  useEffect(() => {
    if(firstRenderRef.current){
      firstRenderRef.current = false;
      return;
    }
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount( count + 1 )}> click to increase </button>
    </div>
  );
};

export default Counter;

For add more information to yousoumar's answer, React team wrote a post about useEffect where explain this and how use this hook correctly:

Synchronizing with Effects

Use a ref or make a custom hook without one.

import type { DependencyList, EffectCallback } from 'react';
import { useEffect } from 'react';

const useClassicEffect = import.meta.env.PROD
  ? useEffect
  : (effect: EffectCallback, deps?: DependencyList) => {
      useEffect(() => {
        let subscribed = true;
        let unsub: void | (() => void);

        queueMicrotask(() => {
          if (subscribed) {
            unsub = effect();
          }
        });

        return () => {
          subscribed = false;
          unsub?.();
        };
      }, deps);
    };

export default useClassicEffect;