How to dynamically generate state variables based on the number of objects fetched

I’m currently trying to write React code that will fetch an object from an API and generate components with them. I am currently testing without using a fetch by creating a dummy object. The component I’m currently trying to generate is a checkbox that toggles between a checked and unchecked state. Unfortunately I can’t figure out how to pass a toggle to my checkbox component. Usually I would just define toggles as individual state variables but since I am constrained to not know the size of the object I don’t know how many checkboxes I will render and, thus, how many toggles I’d have to define.

This is the code I have been trying thus far to no avail. It is supposed to add toggles to the state variable “toggles” so that I have a list of booleans as long as my (in the future fetched) objects. Then I would created a checkbox for every object in “objects” and use the index so that each checkbox has a different toggle it can reference and they don’t all check on the same click.

I think potentially there is an issue with addToggle because it doesn’t seem to update anything when I console.log. Its also possible my entire approach is off base. (I also don’t know if my “objects” variable is an object or pair of objects so sorry if my naming convention is off)

const [toggles, setToggles] = useState([]);

const objects = [
    {
        name: "dummy1"
    },
    {
        name: "dummy2",
    }
]

const addToggle = () => {
    setToggles([...toggles, false]);
    console.log(toggles) // output in console: [], []
}
  
useEffect(() => {
    for (var i = 0; i < objects.length; i++){
        addToggle();
    }
}, []);

This is what is what I’m trying to render in the return of my component.

{objects.map((object, index) => 
  <Checkbox toggle={toggles[index]} setToggle={setToggles} name={object.name} />
)}

This is the checkbox component I’m trying to use. (I wanted to avoid using input)

function RankingCheckbox({toggle, setToggle, name}) {
    if (toggle)
        return (
            <li className="dropdownItem" onClick={() => setToggle(!toggle)}>
                <span className="checkbox">
                    <AiOutlineCheck />
                </span>
                <span className="itemText">{name}</span>
            </li>
        );
    return (
        <li className="dropdownItem" onClick={() => setToggle(!toggle)}>
            <span className="checkbox" />
            <span className="itemText">{name}</span>
        </li>
    );
}