Failed to execute 'createObjectURL' on 'URL

Question

hey guys hope you are doing fine . I am new in react js and i am facing some difficulties to fix this error . TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. I will show you my code . I hope that someone can help me to fix it . Thank you in advance

<Box display="flex" flexWrap="true">
              {this.state.images.map((item, index) => (
                <Box margin="12px">
                  <img
                    alt=""
                    src={this.renderImageUrl(item)}
                    style={{
                      height: "90px",
                      width:
                        this.state.view_type === 0
                          ? "160px"
                          : this.state.view_type === 1
                          ? "210px"
                          : 0,
                      objectFit: "scale-down",
                      backgroundColor: this.state.colors[index],
                    }}
                  />
                  <br />
                  <input
                    id={"contained-button-" + index}
                    type="color"
                    hidden
                    onChange={(e) => {
                      let colors = this.state.colors;
                      colors[index] = e.target.value;
                      this.setState({
                        colors,
                      });
                    }}
                    defaultValue="#000000"
                  />

                  <IconButton
                    aria-label="delete"
                    onClick={(e) => this.removeImage(index)}
                  >
                    <Delete />
                  </IconButton>

                  <label htmlFor={"contained-button-" + index}>
                    <IconButton
                      color="primary"
                      aria-label="upload picture"
                      component="span"
                    >
                      <FormatColorFill />
                    </IconButton>
                  </label>
                </Box>
              ))}
            </Box>

and this is the method that i am using :

renderImageUrl = (item) => {
    return URL.createObjectURL(item);
  };

when i put the method like that :

 renderImageUrl = (item) => {
    try {
      return URL.createObjectURL(item);
    } catch (error) {
      return item;
    }
  };

so the result will be this : enter image description here