React form not rendering with selectedRow data - reactjs

Question

I am new to React.js so forgive me if this is an obvious mistake. I have a list of data with an update button on each row and it is supposed to open a form with the relevant fields already populated with the selectedRow.data but the controls are blank. The URL in Postman is giving the right response so that's not the problem. Any help would be appreciated.
Also getting this error in my console:
"Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component"
Here is my code:
import React, { useState, useContext, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { AppContext } from '../context/AppContext';
import AdminPortal from '../apis/AdminPortal'
const OrganizationUpdateForm = (props) => {
const {id} = useParams()
const { organizations } = useContext(AppContext);
const [name, setName] = useState("");
const [shortName, setShortName] = useState("");
const [parentOrg, setParentOrg] = useState("");
const [website, setWebsite] = useState("");
const [comments, setComments] = useState("");
useEffect(() => {
async function fetchData () {
const response = await AdminPortal.get(`organizations/${id}`);
console.log(response.data.data);
setName(response.data.data.organizations.name);
setShortName(response.data.data.organizations.short_name);
setParentOrg(response.data.data.organizations.parent_org);
setWebsite(response.data.data.organizations.website);
setComments(response.data.data.organizations.comments);
};
fetchData();
}, []);
let Navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
const updateOrganization = await AdminPortal.put(`organizations/${id}`, {
name,
short_name: shortName,
parent_org: parentOrg,
website,
comments
});
Navigate("/");
};
return (
<div>
<form action=''>
<div className="form-group">
<label htmlFor='name'>Name</label>
<input
value={name}
onChange={(e) => setName(e.target.value)}
id="name"
className="form-control"
type="text"
/>
</div>
<div className="form-group">
<label htmlFor='short_name'>Short Name</label>
<input
value={shortName}
onChange={(e) => setShortName(e.target.value)}
id="name"
className="form-control"
type="text"
/>
</div>
<div className="form-group">
<label htmlFor='parent_org'>Parent Organization</label>
<input
value={parentOrg}
onChange={(e) => setParentOrg(e.target.value)}
id="name"
className="form-control"
type="text"
/>
</div>
<div className="form-group">
<label htmlFor='website'>Website</label>
<input
value={website}
onChange={(e) => setWebsite(e.target.value)}
id="name"
className="form-control"
type="text"
/>
</div>
<div className="form-group">
<label htmlFor='comments'>Comments</label>
<input
value={comments}
onChange={(e) => setComments(e.target.value)}
id="name"
className="form-control"
type="text"
/>
</div>
{/* <button
type="submit"
onClick={handleSubmit}
className="btn btn-primary"
>
Submit
</button> */}
</form>
</div>
)
}
export default OrganizationUpdateForm
{
"status": "success",
"results": 1,
"data": {
"organizations": [
{
"id": 20,
"name": "International Aids Vaccine Initiative",
"name_localized": "IAVI",
"parent_org_id": null,
"website": "",
"comment": "",
"create_date": "2019-08-26T12:42:49.457Z",
"logo": null,
"short_name": "IAVI"
}
]
}
}
Above is the response when I hit the API with "http://localhost:3000/api/v1/organizations/20" which is the correct response. Below is the code for AdminPortal
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:3000/api/v1/"
})
This is a screen capture of the network response
The last line in the {id} has no response and I'm wondering if that might be a clue and I'm also surprise to see the port change from 3001 to 3000. I did change to response.data.organizations which seems to match with the structure in the response but that didn't make a difference. Here is what I changed:
useEffect(() => {
async function fetchData () {
// const response = await AdminPortal.get(`organizations/${id}`);
const response = await AdminPortal.get(`organizations/${id}`);
console.log(response.dataorganizations);
setName(response.data.organizations.name);
setShortName(response.data.organizations.short_name);
setParentOrg(response.data.organizations.parent_org);
setWebsite(response.data.organizations.website);
setComments(response.data.organizations.comments);
};
fetchData();
}, []);
Thanks for your support.