Why isnt my pic getting displayed after using Active Storage? - reactjs

Question

I am trying to implement active storage .And have been following along with this article .Its a very very short article https://dev.to/jblengino510/uploading-files-in-a-react-rails-app-using-active-storage-201c.The backend has been set correctly as instructed...The only problem is in the front end..I am not able to write my React project code in a way thats similar to this project and hence im lacking a correct code.
Here is my Project code
The add review form card
function AddReviewForm({user,handleAddReviews}){
const params = useParams();
const[img,setImg]=useState("");
const[r,setR]=useState("");
const[imgData,setimgData]=useState("");
const newReview = {
img,
r,
imgData,
restaurant_id: params.id,
user_id: user.id,
};
const configObj = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(newReview),
};
function handleReviewSubmit(event) {
event.preventDefault();
fetch(`/reviews`, configObj)
.then((r) => r.json())
.then((review)=>{
handleAddReviews(review);
setR('')
setImg('')
setimgData('')
}
);
}
return (
<>
<h1>Add review form</h1>
<form onSubmit={handleReviewSubmit}>
<div>
<input type="file"
name="picture"
accept="image/png, image/gif, image/jpeg"
id="picture"
onChange={(e)=>setimgData(e.target.files[0])} />
</div>
<div>
<label htmlFor="r" >Review</label>
<input type="text" name="r" value={r} onChange={(e) => setR(e.target.value)} placeholder="review" />
</div>
<input type="submit" />
</form>
</>
)
}
export default AddReviewForm;
And the displayed ReviewCard.js
import { useParams } from "react-router-dom";
function ReviewCard({review,user,handleDelete}){
const{id,img,r,picture,user:reviewuser}=review
function handleDeleteClick() {
fetch(`/reviews/${review.id}`, {
method: "DELETE",
})
handleDelete(review.id)
}
return(
<>
<img src={img}/>
<img src={picture} />
<p></p>
<p>{r}</p>
<h6>By {review.user.name}</h6>
{user.id===reviewuser.id&&<button onClick={handleDeleteClick} >Delete</button>}
</>
)
}
export default ReviewCard;
Pls help me out and lemme know what changed I can do so that my picture gets displayeddd