I'm fetching data from an API and putting it in a table in react so far so good, but when I try to edit the data from a row in the table. This gives me the error "PUT 400 (Bad Request)". How should I change the FormData() to receive the value from "<Form.Control/>" and later receive it from the backend?

---Editar2.js---

handlerSubmit = async (event) => {

        event.preventDefault();
        let formData = new FormData();
        formData.set("", event.target.legenda.value);
        
        let resposta = await fetch("api/FotografiasAPI/" + this.props.idLinha, {
            method: "PUT",
            headers:{'Accept':'application/json','Content-Type':'application/json'},
            body: formData
        });
        if (!resposta.ok) {
        console.error("error:" + resposta.status);
        }
        return await resposta.json();
}
    render(){
        return(
        <Modal
        {...this.props}>
                <Form onSubmit={this.handlerSubmit}>
                    <Form.Group controlId="legenda">
                        <Form.Label>legenda</Form.Label>
                        <Form.Control defaultValue = {this.props.legenda} type="text"name="legenda" required  placeholder="legenda"/>
                    </Form.Group>
                    <Form.Group>
                        <Button variant="primary" type="submit">
                            Editar Restaurante
                        </Button>
                    </Form.Group>
                </Form>    
        </Modal>  
    );}}

---Backend---

[HttpPut("{id}")]
public async Task<IActionResult> PutFotografias(int id, [FromForm] Fotografias fotografias)
{
    if (id != fotografias.ID)
    {return BadRequest();}

    _context.Entry(fotografias).State = EntityState.Modified;

    try
    {await _context.SaveChangesAsync();}

    catch (DbUpdateConcurrencyException)
    {
        if (!FotografiasExists(id))
        {return NotFound();}

        else
        {throw;}}

    return NoContent();
}