How to show the Class'data from API

Question

For an exercise I need to use this API : https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json and create an input where I can type a character's name and it will show below the information that is inside the class in the API, but I do not understand how to. For the HTML is ok.

    <h1>Person of the day</h1>
    <h2>Choose a character</h2>
    <div class="form">
        <label for="choose">Choose</label> <br>
        <input type="text" name="choose" class="form-control" id="input"/>
    </div>
    <section id="character"></section>
    
</body>

This code instead only show me or one name or [object Object[] or the last name of the Class :

let url = "https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json";
      
const fetchAll = url => {
    fetch(url) 
    .then((res) => res.json())
    .then( data => {
        const result = data;
        //console.log(result)
       
        for(let actor of result) {
            console.log(actor)
            
            document.getElementById('character').innerHTML = `${actor}`
        }
    })
    .catch((error) => {
        console.error(error);
      });
}

fetchAll(url)

https://i.stack.imgur.com/gTpjX.png

https://i.stack.imgur.com/b0lj6.png