I am trying to have a list of components where each one takes user input and have a separate state.
I want then to be able to filter this list and get the components where for example “switch” is true. I have tried many things but it seems I am not able to figure out how to do this. Lastly I did this:

My parent component

export const Parking = () => {

   const [position, setPosition] = useState([false,false,false])

    const onBayClick = (index) => {
      
      position[index-1] === false? setPosition([...position.slice(0, index) , true, ...position.slice(index + 1)]):setPosition([...position, false])
    }

    const myBays = []
    for (let i = 1; i < 4; i++) {
      myBays.push(<BayForm key = {i} child = {i}  state = {position[i]} onClick = {onBayClick}/>)
    }
    const [filteredBays, setFilteredBays] = useState(myBays)
    const filterBays = () => {
      setFilteredBays(myBays.filter(bay => {
        return bay.position === false
      }))
    }
    

    
    return (
      <>
        
        {myBays}
       
      </>
    )

My child component. I am only posting the relevant bits as it is too long.

     const handleClick = () => {
    onClick(index)
  }

     <FormGroup>
          <FormControlLabel control={<Switch checked = {state} onChange = {handleClick}  color = 'warning'/>} label="Switch"  />
    </FormGroup>

But when I try to flick the switch, I get the following error:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components%s

What is the correct way of doing this? I get errors whatever I try.