React useState implementation to keep random value unchanged on re-render

I have a list od names stored in array.
Everytime user clicks on the add button, a new name is pushed to the array.
Those names are rendered on the page. Every name has randomly generated position inside a specific div.

Everytime a new name is pushed to the array, a position of all the other names inside an array changes.

I am pretty sure that I need to implement useEffect hook, but I can't get it to work right.

Here is the code

  const randomNum = (min: number, max: number): number => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };

  const elements = data.map((el) => {
    return (
        <div
          style={{
            position: 'absolute',
            top: `${randomNum(0, 51)}%`,
            right: `${randomNum(0, 51)}%`,
          }}
        >
          {el.name}
        </div>
    );
  });

A function which updates the state of the names array

 function add(id: number) {
    setData(
      update(data, {
        data: {
          $push: [
            {
              name: '',
              id,
            },
          ] as any,
        },
      })
    );
  }

And a button which triggers the "add" function

       <div
          onClick={() => add(data.data.length + 1)}
        >
          Click to add
        </div>
        <div>
           {elements}
        </div>

Thank you for the help

Add to position (top and right) when you add the name, and not when you render it:

function add(id: number) {
    setData(
      update(data, {
        data: {
          $push: [
            {
              name: '',
              id,
              top: `${randomNum(0, 51)}%`,
              right: `${randomNum(0, 51)}%`,
            },
          ] as any,
        },
      })
    );
  }

Also don't forget adding a key (use the id) when rendering a list:

const elements = data.map((el) => (
  <div
    key={el.id}
    style={{
      position: 'absolute',
      top: e.top,
      right: e.right,
    }}
  >
    {el.name}
  </div>
));