So I am trying to develop a drag and drop feature where each uploaded file can be removed later.

This is the layout when no file is uploaded.

Below layout results when multiples files have been uploaded.

As you can see there is a bin icon. I'm expecting to click this icon to remove the uploaded file. I have implemented the functionality but because of Drag and drop "input" I can select the delete icon. It just opens the upload file window which I suppose is superseeding the cards.

I can get the delete functionality to work by setting display:none in my UploadFile but then I loose the drag and drop functionality. Can someone suggest a way around this scenario? I want to keep drag and drop feature but also want to delete the file if required.

Here is my styled input implementing the drag and drop feature:

const UploadFile = styled("input")`
  font-size: 18px;
  display: inline-block;
  width: 100%;
  border: none;
  text-transform: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  &:focus {
    outline: none;
  }
`;

The second issue is that I want to fix the boundary of the parent card so that when a new file is uploaded it should adjust inside the available space and not expand the entire component as it is doing currently.

Here is the code for this entire component:

return (
    <>
      <FileUploadContainer>
        <InputLabel>{props.label}</InputLabel>
        {fileUrlList.length > 0 ? (
          <UploadLabel onClick={uploadSelectedFiles}>Upload</UploadLabel>
        ) : (
          ""
        )}
        <Container>
          <DragDropText>
            Drag and drop single or multiple files such as sketch , reference
            imgs trim, fabric, etc.
          </DragDropText>
          {fileUrlList.length > 0 ? (
            ""
          ) : (
            <PrimaryButton onClick={onFileUploadClick}>Upload</PrimaryButton>
          )}

          <UploadFile
            type="file"
            ref={fileInputField}
            onChange={onFileUpload}
            title=""
            value=""
          />
          <UploadedFilesContainer>
            {fileUrlList.map((item) => (
              <FileRow key={item.name} className={"row"}>
                <div className={"col-11"}>
                  <a href={item.url} target={"_blank"}>
                    {item.name}
                  </a>
                </div>
              </FileRow>
            ))}
          </UploadedFilesContainer>
        </Container>
      </FileUploadContainer>
    </>
  );

Any help would be highly appreciated. Thanks!