Updating State Array in React with Newly Rendered Component

I’m creating a list of bulleted inputs for a user to enter text. On an ‘Enter’ keystroke I need to render a new bullet. The new bullet must be able to add another bullet to the list. However, each component can only add the next bullet in the list if a bullet at the component’s index + 1 doesn’t exist.

Below, I attempt to pass the setState array and setState function directly to the addBullet function.

const [experienceDescs, setExperienceDescs] = useState([<ExperienceDesc addExperienceDesc={addBullet} key={0}></ExperienceDesc>]);

    function addBullet() {
        let idx = experienceDescs.length + 1;
        setExperienceDescs([...experienceDescs,
                <ExperienceDesc addExperienceDesc={addBullet} key={idx}></ExperienceDesc>] 
                );
        console.log(experienceDescs)
    }

My belief was that passing state array and set state function directly into the addBullet function would enable each new component to edit that state. This is not the case, similarly, when I pass the state array and set state function in as parameters an empty state array is returned when the function is called.

const [experienceDescs, setExperienceDescs] = useState([]);

    function addBullet(bulletArray, setBulletArray) {
        let idx = bulletArray.length + 1;
        setBulletArray([...bulletArray,
                <ExperienceDesc addExperienceDesc={() => {addBullet(bulletArray, setBulletArray)}} key={idx}></ExperienceDesc>]);
        console.log(bulletArray)
    }

/// Render this
<ExperienceDesc addExperienceDesc={() => {addBullet(experienceDescs, setExperienceDescs)}} key={0}></ExperienceDesc>