React - conditional table display - reactjs

Question

I'm working on a react project where the user needs to fill out a form, and according to the "Number of Credits" input - a table should be rendered with some of its rows possibly hidden. My idea was to to set up an isHidden property in the table objects and switch it according to the user input. Then, render only the rows where isHidden = false.
For some reason it's not working, the table keep being rendered as a whole, regardless to the input. I also tried to console.log the rows object, and the isHidden is not changing. Does anybody have an idea?
Here is my code:
App.js:
import Form from './components/Form'
import { useState } from 'react'
import TableDisplay from './components/TableDisplay'
import Banner from './components/Banner'
const App = () => {
const [showBanner, setShowBanner]=useState(false)
const [FormData, setFormData] = useState([
{
id:1,
name:'',
credits:'',
}
])
const [rows, setRows] = useState([
{
id:1,
description:'',
semester:'',
prefix:'ENG',
number:'368/371',
grade:'',
editing:'',
isHidden:false,
},
{
id:2,
description:'',
semester:'',
prefix:'',
number:'',
grade:'',
editing:'',
isHidden:false,
},
{
id:3,
description:'',
semester:'',
prefix:'',
number:'',
grade:'',
editing:'',
isHidden:false,
},
])
const getFormInfo = (info) => {
const id = Math.floor(Math.random() * 10000) + 1
const newName = {id,...info}
setFormData([newName]);
const num = info.credits;
if (num > 40 && num < 70) {
setRows(rows.map((row) =>
row.id===3 ? {isHidden:!row.isHidden}: row
))
}
else if (num>70) {
setRows(rows.map((row) =>
row.id===3 || rows.id===2 ? {isHidden:!row.isHidden}: row
))}
console.log(rows);
}
return (
<>
<Form onAdd={getFormInfo}
onAdd2={() => setShowBanner(!showBanner)
}
/>
{showBanner ? <Banner FormData={FormData}/> : null}
{showBanner ? <TableDisplay rows={rows}/>: null}
</>
);
}
export default App;
Form.js:
import { useState } from "react"
const Form = ({ onAdd,onAdd2}) => {
const[name, setName] = useState('')
const[credits, setCredits] = useState('')
const onSubmit = (e) => {
e.preventDefault();
onAdd({name,credits})
setName('');
setCredits('');
}
return (
<form onSubmit={onSubmit} >
<div className="mb-3">
<label className="form-label">Student Name:</label>
<input value={name}
onChange={(e) =>
setName(e.target.value)}
type="text"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"/>
</div>
<div className="mb-3">
<label className="form-label">Total Transfer Credits:</label>
<input value={credits}
onChange={(e) =>
setCredits(e.target.value)}
type="number"
className="form-control"
id="exampleInputPassword1"/>
</div>
<button onClick={onAdd2}
type="submit" className="btn btn-primary">Submit</button>
</form>
)
}
export default Form
TableDisplay.js:
import TableRows from "./TableRows"
const TableDisplay = ({rows, onDelete}) => {
return (
<div>
<table className="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th scope="col">Semester</th>
<th scope="col">Prefix</th>
<th scope="col">Number</th>
<th scope="col">Grade</th>
<th scope="col">Editing</th>
</tr>
</thead>
<tbody>
{rows.map((row) => {
return <TableRows
key={row.id}
row={row}
/>
})}
</tbody>
</table>
</div>
)
}
export default TableDisplay
TableRows.js:
import React from 'react'
const TableRows = ({row}) => {
return (
<>
<tr>
<td scope="row">{row.id}</td>
<td>{row.description}</td>
<td>{row.semester}</td>
<td>ENG</td>
<td>368/371</td>
<td>{row.grade}</td>
<td><button type="button" className="btn btn-warning">Edit</button></td>
</tr>
</>
)
}
export default TableRows
Thanks!