React: How do I assign unique IDs to each FileSelector component instance in Next.js?

I have a Next.js form that renders the same FileSelector component three times, each with a distinct number passed via the num prop. Each component is designed to display an image after a file is selected.

The issue is that no matter which component (2 or 3) selects a file, the image always appears in the first instance. I've reduced my code to the minimum necessary to reproduce the problem, but I'm still stuck on why this is happening.

Below is the Form:

JAVASCRIPTCopied
"use client";

import FileSelector from "./file_selector";

export const SimpleForm = () => {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-center gap-4 p-4">
        <FileSelector num="1" />
        <FileSelector num="2" />
        <FileSelector num="3" />
      </div>
    </div>
  );
};

And here is the FileSelector component (file_selector):

JAVASCRIPTCopied
"use client";

import React from "react";
import { ImgBox, ShowImg } from "./img_options";

const FileSelector = ({ num }: { num: string }) => {
  const [filePath, setFilePath] = React.useState<string>("");
  const [fileName, setFileName] = React.useState<string>("");

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      console.log("file is ", file);
      const value = URL.createObjectURL(file);
      setFilePath(value);
      setFileName(file.name);
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={handleFileChange}
        className="hidden"
        id="file-selector"
      />
      <label htmlFor="file-selector" className="cursor-pointer">
{/* I had this div and the one below in separate components, but added them here for simplicity.  */}
        <div> 
          {filePath ? (
            <div>
              <img
                className="h-64 w-64 object-contain"
                src={filePath}
                alt={fileName}
              />
            </div>
          ) : (
            <div className="box-border flex h-64 w-64 items-center justify-center border-4 border-white p-4">
              <h1 className="text-2xl font-bold tracking-tight text-white">
                Image {num}
              </h1>
            </div>
          )}
        </div>
      </label>
    </div>
  );
};

export default FileSelector;

I've learned that the problem likely stems from all instances using the same id ("file-selector") for the hidden file input. This duplication causes the label's htmlFor attribute to always bind to the first input element. I would appreciate any guidance on how to generate unique IDs for each component instance so that each file selection displays in the correct component.

Any help or suggestions are welcome.