Get Input fields of a form equal to the value entered by the user - react-hooks

Question

I want the input fields in form equal to the number entered by the user in react. But I am not sure how to do that I know that it will require looping but i can't figure out the approach.
Here is the code for my form
import React, { useEffect, useState } from "react";
import './roominfo.css';
import { ImBin } from 'react-icons/im';
import { useNavigate } from 'react-router-dom'
import RoomInfoService from '../services/RoomInfoService';
const RoomInfo = () => {
const [rooms, setRooms] = useState('');
const [updated, setUpdated] = useState(rooms)
const handleInput = (event) =>{
setRooms(event.target.value);
}
const handleClick = () =>{
setUpdated(rooms);
}
return (
<>
<div className='heading'>
<h1 style={{ marginBottom: '50px' }}>Enter Your PG Room Details</h1>
</div>
<form>
<div className="form-inline" style={{ marginBottom: '50px' }}>
<label>Enter total number of rooms: </label>
<input type="number" name="total_no_of_rooms" id= "myText" style={{ width: '90px'}} onChange={handleInput} />
<button type="button" className="button add" value={rooms} onClick={handleClick}>Get Rooms</button>
<p>Total Rooms:{updated}</p>
</div>
</form>
<div>
<form>
<div className="form-inline" style={{ borderBottom: '1px solid black' }}>
<label>Sharing Number</label>
<select id="shared_no" name="shared_no" title="no of shared rooms" >
<option value="">---Select---</option>
<option value="1">Single Sharing</option>
<option value="2">Two Bed Sharing</option>
<option value="3">Three Bed Sharing</option>
<option value="4">Four Bed Sharing</option>
<option value="5">Five Bed Sharing</option>
</select>
<label> No of Rooms:</label>
<input type="number" name="no_of_rooms" ></input>
<label> Rent per month:</label>
<input type="number" style={{ width: '100px' }} name="rent_per_month"></input>
<label> Total Capacity:</label>
<input type="number" style={{ width: '50px' }} name="total_capacity" ></input>
<label> Vacancy:</label>
<input type="number" style={{ width: '50px' }} name="vacancy"></input>
</div>
<div className="button-section">
<button className="button add" type="button">Add</button>
<button className="button submit" type="submit">Submit</button>
</div>
</form>
</div>
</>
)
}
export default RoomInfo
Can Please someone help me
Should I map it like
formValues.map((element,rooms) =>(
//form details)}
Also how to uniquely submit them. Thank you