Submitting dynamically created form to database in reactJS

Question

I am trying to insert the values through this dynamic form but I am only able to insert just one entry (even though I enter multiple forms) and the values that are getting inserted are 0 (in the database as well). I am passing the index still I am not getting the desired output. The list looks like this: List of the entered details

The previous entry was entered manually. This is the CODE through which I submit values.

import React, { useEffect, useState } from "react";
import './roominfo.css';
import { ImBin } from 'react-icons/im';
import { useNavigate, useParams } from 'react-router-dom'
import RoomInfoService from '../services/RoomInfoService';

const RoomInfo = () => {
    const [shared_no] = useState();
    const [no_of_rooms] = useState();
    const [rent_per_month] = useState();
    const [vacancy] = useState();
    const [total_capacity] = useState();
    const [pg_fid, setpgfid] = useState();H

    let handleChange = (i, e) => {
        let newFormValues = [...formValues]; /** makes a copy of the current form values and assign it to newFormValues **/
        newFormValues[i][e.target.name] = e.target.value;
        setFormValues(newFormValues);
    }

    const navigate = useNavigate();

    let addFormFields = () => {
        setFormValues([...formValues, { shared_no: "", no_of_rooms: "", rent_per_month: "", vacancy: "",total_capacity: ""}])
    };

    let removeFormFields = (i) => {
        let newFormValues = [...formValues];
        newFormValues.splice(i, 1);
        setFormValues(newFormValues)
    }

    const [formValues, setFormValues] = useState([{ shared_no: "", no_of_rooms: "", rent_per_month: "", total_capacity: "", vacancy: "" }])

    /*const [settotal_no_of_rooms] = useState('1');
    const [setrooms_entered] = useState('1');

    const getTotalCapacity = () => {
        
        return formValues.reduce((total,element) => {
            return total + Number(element.shared_no) * Number(element.no_of_rooms);
        }, 0);
    };*/

    const resetForm = () => setFormValues([{shared_no: "", no_of_rooms: "", rent_per_month: "", vacancy: "",total_capacity: ""}]);

    const Total_no_of_rooms_entered = () => {
        return formValues.reduce((total, element) => {
            return total + Number(element.no_of_rooms);
        }, 0);
    };

    const saveRoomInfo = (e) =>{
        e.preventDefault();
        const roominfo = [...formValues];
        RoomInfoService.createRoomInfo(roominfo).then((response) => {
            console.log(response.data);
            navigate('/listroominfo');
        }).catch(error =>{
            console.log(error);
        })
    }

    return (
        <>
            <div className='heading'>
                <h1 style={{ marginBottom: '50px' }}>Enter Your PG Room Details</h1>
            </div>
            <form>

                <div className="form-inline" style={{ marginBottom: '50px' }}>
                    {/*<label>Total of Rooms:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <input type="number" name="total_no_of_rooms" style={{ width: '90px' }} onClick={(e) => settotal_no_of_rooms(e.target.value)} defaultValue={1} />&nbsp;&nbsp;&nbsp;&nbsp;*/}
                    <label>Rooms Entered:</label>
                    <div><input type="number" name="rooms_entered" value={Total_no_of_rooms_entered()} readOnly></input></div>
                </div>
            </form>
            <div>
                <form>
                    {formValues.map((element, index) => (
                        <div className="form-inline" key={index} style={{ borderBottom: '1px solid black' }}>
                            <label>Sharing Number</label>
                            <select id="shared_no" name="shared_no" title="no of shared rooms" value={element.shared_no || ""} onChange={e => handleChange(index, e)} >
                                <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>&nbsp;&nbsp;&nbsp;No of Rooms:</label>
                            <input type="number" style={{ width: '60px' }} name="no_of_rooms" value={element.no_of_rooms || ""} onChange={e => handleChange(index, e)}></input>

                            <label>&nbsp;&nbsp;&nbsp;Rent per month:</label>
                            <input type="number" style={{ width: '100px' }} name="rent_per_month" value={element.rent_per_month || ""} onChange={e => handleChange(index, e)}></input>

                            <label>&nbsp;&nbsp;&nbsp;Total Capacity:</label>
                            <input type="number" style={{ width: '80px' }} name="total_capacity" value={element.total_capacity} onChange={e => handleChange(index, e)}></input>

                            <label>&nbsp;&nbsp;&nbsp;Vacancy:</label>
                            <input type="number" style={{ width: '50px' }} name="vacancy" value={element.vacancy || ""} onChange={e => handleChange(index, e)}></input>
                            {
                                index ?
                                    <button type="button"  className="button-remove" onClick={() => removeFormFields(index)}><ImBin size={20}/></button>
                                    : null
                            }
                        </div>
                    ))}
                    <div className="button-section">
                        <button className="button" type="button" onClick={() => addFormFields()}>Add</button>&nbsp;&nbsp;&nbsp;
                        <button className="button" type="button" onClick={resetForm}>Reset</button>
                        <button className="button" type="submit" onClick={(e) => saveRoomInfo(e)}>Submit</button>
                    </div>
                </form>
            </div>
        </>
    )
}

export default RoomInfo

Reference of Dynamic Form

The issue is while I am fetching the data from the form. But I can't figure it out. Thank you.