How to gentrate Unique Id in ReactJs

Question

I am new to ReactJS. I want to use Unique Id in my react program. So I create a custom hook, and that hook returns a unique id. But my situation is that when I use this custom hook in my component, at the same time my component is initialized twice. I don't know how to avoid multiple initial loads.

This is my custom Hook

import { useEffect, useReducer } from 'react';

export const CreateUniqueId = () => {
  const [renderId, forceUpdate] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    forceUpdate();
  }, []);

  return renderId;
};

If you know the answer, tell me what I should do.

Thanks in advance.