How can I send a input array to backend? - node.js

Question

I am trying to create a form that we can send an array to backend using input with mapping but I ended up created input name different from useState. Like it send seperate data to backend.
Here is my following code in front end:
const initialFormState = {
rules: teamData.rules.map((value) => value),
creator: teamData.User.public_user_id,
};
const [updateTeamData, setUpdateTeamData] = useState(initialFormState);
const handleSubmit = async (event) => {
event.preventDefault();
setEditing(false);
console.log("updateTeamData", updateTeamData);
console.log("input", inputs);
// Send update request
const res = await axios.put(`/api/v1/teams/team/${teamId}`, updateTeamData);
// If no validation errors were found
// Validation errors don't throw errors, it returns an array to display.
if (res.data.validationErrors === undefined) {
// Clear any errors
setErrorsArr([]);
// Hide the errors component
setShowErrors(false);
// Call update profiles on parent
fetchTeamData();
} else {
// Set errors
setErrorsArr(res.data.validationErrors.errors);
// Show the errors component
setShowErrors(true);
}
};
<form onSubmit={handleSubmit}>
{inputs?.map((data, idx) => {
return (
<input
name={teamData.rules[idx]}
onChange={handleChange}
placeholder={`Rule ${idx + 1}`}
defaultValue={teamData.rules[idx]}
/>
);
})}
When I hit submit and the console log gave me this data:
{rules: Array(0), creator: "nh1619917421620", "": "3"}
"": "3"
creator: "nh1619917421620"
rules: []
__proto__: Object
and here is my code from backend:
exports.updateTeamData = async (req, res) => {
// Get userId
const userId = req.session.passport.user.id;
// Get teamId
const publicTeamId = req.params.teamId;
// Fetch private id for team
const teamId = await getTeamId(publicTeamId);
// The user making the request
const userPublicId = req.session.passport.user.publicId;
// The creator of the team
const creatorPublicId = req.body.creator;
// Check who is making the request
if (userPublicId !== creatorPublicId) {
res.status(401).json("msg: You cant update a team you did not create");
}
const picture = req.body.teamAvatar;
const rules = req.body.rules;
const rules = req.body.rules;
console.log("rules", rules);
console.log("body", req.body);
// Updates
const payload = {
rules: rules,
mergedTo: teamId,
};
}
How can I do my form right way?