Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

Help. AI cannot even help me on this one.

function handleChange(e) {
    const key = e.target.id;
    let newValue;
  
    if (key === 'src') {
      // Check if files are present and it's not an empty array
      if (e.target.files && e.target.files.length > 0) {
        // Get the first file
        newValue = e.target.files[0];
        
      } else {
        // Reset value if no files are present
        newValue = null;
      }
    } else {
      // For other keys, use e.target.value
      newValue = e.target.value;
    }
  
    // Update state using functional update to ensure we have access to the previous state
    setValues(prevValues => ({
      ...prevValues,
      [key]: newValue,
    }));
  }

I should mention I an rendering my form like this

<div className="p-6">
            {foundation.map((fd, i) => (
              fd.required &&
              <div key={i}>
                {
                  <div>
                    <div className="uppercase text-sm text-gray-800" htmlFor={fd.key}>{fd.key}</div>
                    <input
                      value={values[fd.key]}
                      onChange={handleChange}
                      className={`${localCss} ${fd.css}`}
                      type={fd.type}
                      id={fd.key}
                      name={fd.key}
                      maxLength={fd.maxLength}
                      minLength={fd.minLength}
                      required={fd.required} />
                  </div>
                }
              </div>
            ))}
            <div hidden={!showMessage.show} className="p-4 border-2 border-yellow-400 bg-yellow-200 rounded-lg">{showMessage.message}</div>
          </div>