Re-render Child component and change child state states when parent state changes

Question

I have a parent component which has a state containing an array of object:

function ParentComponent(props) {
    const [objects, setObjects] = React.useState([...props.objects]);

    const handleObjectRefresh = () => {
        /**
         * Refresh objects
         */
        setObjects([
            ...newObjects
        ])
    }

    return (
        <div>
            <Button onClick={handleObjectRefresh} >Refresh</Button>
            {objects.map((obj, index) => {
                return(
                    <ChildComponent obj={obj} />
                )            
            })
        }
        </div>
    )
}

function ChildComponent(props){
    const [objParam1, setObjectParam1] = React.useState(props.obj.param1);
    const [objParam2, setObjectParam2] = React.useState(props.obj.param2);

    useEffect(()=> {
        setObjectParam1(props.obj.param1);
        setObjectParam2(props.obj.param2);
    }, [props.obj])

    return (
        <div>
            <Texfield defaultValue={objectParam1}/>
            <Texfield defaultValue={objectParam2}/>
        </div>
    )
}

My issue is right now the current default values of Textfield does not get updated if an object is removed, the object does change in the child component however, the textfield default value are the previous state, I was wondering how can I completely change the child state when the object list in the parent component changes?

EDIT

To fix the issue, I simply changed defaultValue to value