如何将Javascript REST api的值传递给html JSX中的value=""

我从REST api获取数据，想在React JS中以value=""的形式显示出来，我该怎么做？

这段代码从REST api获取数据

const [bvnDetails, setBvnDetails] = useState("");

useEffect(() =>{
    let outbvn = localStorage.getItem('userinfo');
    fetch('URL HERE',{
        method: 'GET',
        headers:{
            'Accept' : 'application/json',
            'Content-type':'application/json'
        },
    }).then((response) => response.json())
    .then((responseJson) =>{
        setBvnDetails(responseJson.data);
    })
})

现在我想把数据从端点显示在应用程序的数值文本框中，看起来像这样：

<input name="formtext1" placeholder="  Enter First name " type="text" className="fname_text" size="1" />
<input name="formtext2" placeholder="  Enter Last name " type="text" className="lname_text" size="1" />
<textarea name="textarea1" placeholder="  Enter Address " className="address_text" cols="1" rows="1"></textarea>
<input name="formtext3" placeholder="  Enter Telephone " type="text" className="tel_text" size="1" />
<input name="formtext4" placeholder="  Enter email " type="text" className="email_text" size="1" />
<input name="formtext5" placeholder="  Enter Date " type="date" className="date_text" size="1" />

我如何在文本框上设置这些值？例如，我是否要像这样设置：

<input name="formtext1" placeholder="  Enter First name " type="text" className="fname_text" value ="{bvnDetails.firstname}" size="1" />

我是新来的，我在这里需要指导。