Using react hook forms with dynamically added components - reactjs

Question

I have some components with the same set of input fields. User could add them or remove them.
const [sectionItems, setActionItems] = useState<ISectionItems[]>([
{id: Date.now(), number: 1}
])
{sectionItems.map((sectionItem) =>
<SectionItem
key={sectionItem.id}
number={sectionItem.number}
addSectionItem={addSectionItem}
removeSectionItem={removeSectionItem}
isOnlySection={isOnlySection}
/>)}
So the fiels are inside each SectionItem component.
I use react-hook-forms to get the data from the form, but I have no idea how to deal with that in the situation when we have dynamically changing list of components
const SectionItem: FC<SectionItemProps> = (SectionItemProps) => {
const addClickHandler = (e: React.MouseEvent) => {
SectionItemProps.addSectionItem()
}
const removeClickHandler = (e: React.MouseEvent) => {
SectionItemProps.removeSectionItem(SectionItemProps.number)
}
return (
<React.Fragment>
<Typography variant="h6" gutterBottom sx={{marginTop: 3}}>
{`Участок № ${SectionItemProps.number}`}
</Typography>
<Grid container spacing={3} sx={{marginTop: 1}}>
<Grid item xs={12} sm={6}>
<TextField
required
id="insideDiameter"
name="insideDiameter"
fullWidth
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="outsideDiameter"
name="outsideDiameter"
fullWidth
variant="standard"
/>
</Grid>
<Grid container spacing={3} sx={{marginTop: 1}}>
<Grid item xs={12} sm={12} style={{textAlign: "center"}}>
<Fab size="small" aria-label="add" >
<AddIcon color = 'primary' onClick={addClickHandler}/>
</Fab>
{SectionItemProps.isOnlySection
? <></>
: <Fab size="small" aria-label="add" sx={{marginLeft: 1}}>
<RemoveIcon color='primary' onClick={removeClickHandler} />
</Fab>
}
</Grid>
</Grid>
</React.Fragment>
);