Reactjs – The three dots menu apears on the last video (Multiple HTML videos)

I am rendering some HTML video tags to play videos. Now the problem is when the user click on the three dots menu, the menu should appear near the button that triggered it but the menu shows near the last video’s three dots. I have simplified the code a bit and attached the output as well.
Any help or hint is highly appreciated.

import React from 'react';

const VideoPlayer = ({ src, id }: {src: string; id: number}) => {
  return (
    <div id={`videodiv-${id}`}>
      <video className="w-[230px] h-[250px] object-cover rounded-lg" id={`video-${id}`} controls src={src}></video>
    </div>
  );
};

const Test = () => {
  const videos = [
    { src: '/icons/1.mov', id: 1 },
    { src: '/icons/2.mp4', id: 2 },
    // Add more videos as needed
  ];

  return (
    <div>
      {videos.map((video) => (
        <VideoPlayer key={video.id} src={video.src} id={video.id} />
      ))}
    </div>
  );
};

export default Test;

Output

I have given unique ids, also unique keys also added keys to parent containers. Previously I was using a modal to open these in a bigger size. I also tried to test this in another fresh project. Same thing there as well.