How to add image to bootstrap card as a preview in react? - reactjs

Question

I am trying to create a bootstrap form and i want to show as a preview in bootstrap card what it will look like
Here is my code for form
<div className="container">
<div className="row">
<div className="col p-5">
<div className="card" style={{ width: "18rem" }}>
<img data-src={img} className="card-img-top" alt="any image"/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{place}</p>
<p className="card-text">{year}</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
<div className="col p-5">
<form type="form">
<div className="form-group">
<label>Title</label>
<input
name="title"
type="text"
className="form-control mt-2"
placeholder="Enter name of car"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label>Place</label>
<input
name="place"
type="text"
className="form-control mt-2"
placeholder="Enter city name"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</div>
<div className="form-group">
<label>Year</label>
<input
name="year"
type="number"
className="form-control mt-2"
placeholder="Enter mfg year"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</div>
<div className="form-group">
<input
className=" mt-2"
type="file"
name="file"
value={img}
onChange={changeHandler}
/>
</div>
{error && <div>{error}</div>}
{file && <div>{file.name}</div>}
<button
onClick={uploadFile}
type="submit"
className="btn btn-primary mt-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
I can preview title as given in input field by passing as value parameter but i don't know how to do it with image. Also i am storing value of title,place etc in variable do i need to do the same for image too?