I have a function component in which i want to add (with a plus button +) a group of rows, each row contains Text Inputs and Dropdown picker. so a I create a globale state contains 2 lists , one will have the components (<TextInput ...> ,<Picker ...> ) and the other will have the state of the value we pass to the components so that i can match the two object in the list by theirs indexes:

const [stockGroupes, setStockGroupes] = useState({
groupsInfoInputs: [],
groupsInfoData: [],
});

image show how the render will be in the function component

the problem is : when i click to dropdown and I choose some value the state changed ( in groupsInfoData[ index of the dropdown ] ) but the value in dropdown still fix ("AGA.." like is shown in the image above ) , it's some how like when the component are created dynamically they doesn't re-render when state changed, is that true ? and how i can force re-render when the state change. I hope I was able to describe my issue, if you want some more explanation let me know.

EDIT : when i use this approach to force re-render

const useForceUpdateInside = () => {
const [value, setValue] = useState(0); // integer state
return () => setValue((value) => value + 1); // update the state to 
force render
};

the problem solved , but i get the error just after that because I call the useForceUpdateInside inside a the function that change the value of dropdwon:

(Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:)