How can I access the value of my inputs in React? - reactjs

Question

So I have a regular page, I am working with next js. It looks like this:
"use client"
import SubjectInput from "../../../../components/subjectsInput"
export default function Page()
{
let inputs = []
for (let i = 0; i < numberOfInputsGiven; i++) {
inputs.push(<SubjectInput key={i}/>)
}
return(
<>
<form>
<>
{inputs}
</>
<button type="submit">OK</button>
</form>
</>
)
}
I use a component called "SubjectInput", to generate the input fields I need. Now, my question is, how can I access the value of the inputs that are in SubjectInput? Here is what SubjectInput looks like:
export default function SubjectInput(){
return(
<div>
<div>
<label>Name</label>
<input type="text" placeholder="Enter subject's name" required />
</div>
<div>
<label>From</label>
<input type="time" placeholder="Enter subject's starting time" required />
</div>
<div>
<label>To</label>
<input type="time" placeholder="Enter subject's ending time" required />
</div>
</div>
)
}

Answer 1

I would create a component that just holds one label and input, import it into the main page and change the values through props.
Main page
import Input from "./components/Input";
function App() {
return (
<div className="App">
<form>
<Input label="my text" type="text" value="hello" />
<Input label="my number" type="number" value="123" />
<Input type="submit" />
</form>
</div>
);
}
export default App;
Input component
import React from "react";
const Input = (props) => {
return (
<div>
<label>{props.label}</label>
<input type={props.type} value={props.value} />
</div>
);
};
export default Input;