I don´t know how to code this input so that when an object is created through a form, the image property returns a string so that it can later be displayed in a card.

<input 
      classname = {style.imageInput}
      type = "file"
      name = "image
      alt = "newDoggie"
      accept = "image/*"
      multiple
/>

The object has this properties:

id: '',
name: ''.
breed_group: ''.
heightMin: '',
heightMax: '',
weightMin: '',
weightMax: '',
life_span: '',
image: '',
temperaments: []
                           

An example of how I am saving the other data:

<input
      classname = {style.nameInput}
      placeholder = "NAME"
      type = "text"
      value = {input.name}
      name = "name"
      onChange = {(e) => handleChange(e)}
      required
/>

<input
      className = {style.heightInput}
      required
      placeholder = "MINIMUM HEIGHT -cm- "
      type = "text"
      value = {input.heightMin}
      name = "heightMin"
      onChange = {(e) => handleChange(e)}
/>

function handleChange(e) {
    setInput({
        ...input,
        [e.target.name] : e.target.value
    });