Throws an error.

handleTwoInputs.js

    const [avatar, setAvatar] = useState('');
    const [avatarname, setAvatarName] = useState('Choose File');
    const [cover, setCover] = useState('');
    const [covername, setCoverName] = useState('Choose File');
    const [uploadPercentage, setUploaderPercentage] = useState(0);

    const handleChange = name => e => {
        setProducerData({...producerData, [name]: e.target.value});
        setAvatar(e.target.files[0]);
        setAvatarName(e.target.files[0].name);
        setCover(e.target.files[0]);
        setCoverName(e.target.files[0].name);
        console.log(e.target.files);
    }

    const addProducer = async e => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('avatar', avatar);
        formData.append('cover', cover);
        console.log(formData);
        // addProducer(formData, setUploaderPercentage);
    }