How to pass the right id to the api on file type input click using javascript and react?

Question

i want to pass the correct id to the api on clicking file type input using javascript and react.

what i am trying to do?

i have a list of cards and each card has a menu with items "edit", "upload" and "remove". on clicking upload the user file browser opens up and he can upload a file to that card and send the uploaded file to api.

below is the code,

const FileCard = (cardData) => {
    const fileInput = React.useRef<HTMLInputElement>(null);

    const handleClick = React.useCallback(() => {
        fileInput.current?.click();
    }, [fileInput.current]);

    const uploadFile = (
        <MenuItem
            onClick={handleClick}
        >
            Upload
        </MenuItem>
        
        const options = compact([edit, uploadFile, remove]);
        return (
            <Flex>
                {cardData.map((fileImportData, index) => {
                    const {description, id } = fileImportData;
                    
                    return (
                        <Card
                            id={id}
                            key={id}
                            options={options}
                        >
                            <input
                                ref = {fileInput}
                                onChange={async() => {
                                    const file = fileInput?.current?.files?.[0];
                                    try {
                                        const params = {
                                            templateFile: file,
                                        };
                                        await updateFile({
                                             variables: {
                                                 id: id!, //here the id is the id of 
                                                 // last cardData since we are 
                                                 // mapping
                                                 params: params,
                                             },
                                        });
                                    }
                                /> 
                            );
                        );
                    }

Now the problem is when i click update button of say first card and upload a file the id is always set to the id of the last id of fileImportData.

so basically when we click update button it invokes handleClick method which will invoke onchange method of input button. but the id is not the id of the card for which the update button is clicked. instead the id is the the value got from last object from cardData array of objects since we are mapping through that.

so the problem is when you click update for any card and upload file it always updates the file to last card. the id is always for the last card id.

How can i pass the id of the card clicked in handleClick method. could someone help me with this. thanks.

EDIT:

what i have tried?

const FileCard = (cardData) => { const fileInput = React.useRef(null);

        const options = compact([edit, uploadFile, remove]);
        return (
            <Flex>
                {cardData.map((fileImportData, index) => {
                    const {description, id } = fileImportData;
                    const handleClick = React.useCallback(() => {
                        console.log('id here', id) // gives 
                        //correct id
                        fileInput.current?.click(id); //how can i pass id to click method of input ref. it throws error expected 0, got 1
                    }, [fileInput.current]);

                    const uploadFile = (
                        <MenuItem
                            onClick={handleClick}
                        >
                            Upload
                        </MenuItem>
                    );
        
                    return (
                        <Card
                            id={id}
                            key={id}
                            options={options}
                        >
                            <input
                                ref = {fileInput}
                                onChange={async() => {
                                    const file = fileInput?.current?.files?.[0];
                                    try {
                                        const params = {
                                            templateFile: file,
                                        };
                                        await updateFile({
                                             variables: {
                                                 id: id!, //here the id is the id of 
                                                 // last cardData since we are 
                                                 // mapping
                                                 params: params,
                                             },
                                        });
                                    }
                                /> 
                            );
                        );
                    }

i have tried above code moving the handleClick and uploadFile within cardData.map

in handleClick when i log id i get correct value how can i pass that id to fileInput.current?.click() ? it throws error expected 0 got 1.

could someone help me with this. thanks.