Updating child component when a value in parent changes in React

Question

So, I'm calling this child component like this

<FilterItem filterOption={filterOption} updateFilter={updateFilter} value={filter[filterOption.fieldName]}/>

and setting the value in the input tags with those values

<div style={{padding: 5}}>
            <input 
                type={props.filterOption.type} 
                {...props.filterOption.additionalAttr} 
                onChange={(event) => changeFilter(event)} 
                field={props.filterOption.fieldName}
                value={props.filterOption.value}
                checked={props.filterOption.value}
            /> 
            <span>{props.filterOption.label}</span>
</div>

but once the value is set, it is not changing even if I change the values in parent component.

Is there a way to achieve this? I saw this, but as someone who as some experience with ember, I feel like there has to be a simple solution

edit:-

The state in parent is defined like this

const [filter, setFilter] = useState({});

and the state is changed in this method

const updateFilter = (key, value) => {
    var tempFilter = filter;
    tempFilter[key] = value;
    setFilter(tempFilter);
};

this method is called from the child

const changeFilter = (event) => {

    var key = event.target.getAttribute("field");
    var value = (() => {
        switch(event.target.type){
            case "checkbox":
                return event.target.checked;
            case "range":
                return event.target.value
        }
    })();
    
    props.updateFilter(key, value)
}