When props data to child component my items is not displayed ? React

When I props the data on child component do not appear propertly data to me.

First check my parent compnent:

  selectFile = (event) => { // on select file and upload
    let addedFiles = []; 
    event.target.files.forEach((element) => {
      addedFiles.push(element);
    });  
    this.setState({
      tempFiles: addedFiles,
      modalTempFiles: this.state.old.concat(addedFiles),
      old: this.state.old.concat(addedFiles)
    }); 
  };


  componentDidMount() { 
    //  I NEED TO USE SETTIMEOUT BECAUSE MY PROPS DATA IS NULL ON MOUNT
    setTimeout(() => { 
      this.setState({
        tempFiles: this.props.files.exFiles,
        modalTempFiles: this.props.files.exFiles,
        old: this.props.files.exFiles
      });
    }, 1500);
  }

HTML: (check only FileUploadContainer component )

  render() {
    const {
      intl,
      onHideAttachmentsModal,
      files,
      show,
      onHideErrorModal,
      showErrorModal
    } = this.props;
    const { modalTempFiles } = this.state;
    return (
      <>
        <Modal
          show={show} 
          title={intl.formatMessage(messages.attachments)} 
          primaryButtonTitle="Upload attachment(s)"
        > 
           //RIGHT NOW JUST THIS COMPONENT IS IMPORTANT -> FileUploadContainer
          <FileUploadContainer
            stopPropagation={this.stopPropagation}
            onFileDrop={this.onFileDrop}
            selectFile={this.selectFile}
            files={this.props.files?.exFiles}
          />

          {modalTempFiles.length > 0 && (
            <FileContainer
              files={modalTempFiles}
              onClickHandler={this.removeFile}
            />
          )}
        </Modal> 

      </>
    );
  }

My state is :

this.state = {
  tempFiles: [],
  modalTempFiles: [],
  old: []
};

Now I’m props some data in my children’s component. To my FileUploadContainer component.

This is my child component:

const FilesContainer = ({ intl, files, onClickHandler, fullWidth }) => {
  console.log("files", files);
  return (   
        {files.map((file, index) => (
          <File
            key={index}
            name={file.name}
            size={file.size}
            onClickHandler={() => onClickHandler(file, index, true)}
          />
        ))} 
  );
};

Don’t show me names and sizes… I see three items printed in loop but name and size is empty…

One of the interesting things is that my console.log (‘files’, files) is printed more than 4-5 times..

What’s the problem here? Why I am shown 3 items (as many as I need) but with empty values.
What I example see:

1. Name : EMPTY , Size: EMPTY,
2. Name : EMPTY , Size: EMPTY,
3. Name : EMPTY , Size: EMPTY

BUT THREE TIMES LOOPED AS IT SHOULD BE because i have three items…