Material UI TransferList does not set state from props with useState

Question

My component (Material UI TransferList) receives props.selectedItems as an array of previously selected items. And in props.Items I have all available items.

I expect to see props.selectedItems in the left panel of TransferList. However, the left panel is empty and right panel is full, even though i put there only remainingItems.

function TransferList(props) {
  // props.items = [0,1,2,3,4,5,6,7]
  console.log(props.selectedItems);    //  [2, 6]
  let remainingItems = not(props.items, props.selectedItems);  
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  const [checked, setChecked] = useState([]);
  const [right, setRight] = useState(remainingItems);
  const [left, setLeft] = useState(props.selectedItems);
  console.log(right);                  //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  console.log(left);                   //  []                    ?????????????????????????!!!!!!!!!!!!
  ...
  

When i tried useEffect (from this question) it did not help me:

... // the same code above

useEffect(() => {    
    let remainingItems = not(props.items, props.selectedItems);
    setRight(remainingItems);
    setLeft(selectedItems);
    console.log(right);                    //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
    console.log(remainingItems);         //  [0,1,3,4,5,7] 
    console.log(left);                     //  []                    ?????????????????????????!!!!!!!!!!!!
  }, [props.items, props.selectedItems]);

...

Also, when i use simple array without getting it from props, everything works perfectly!

function TransferList(props) {
  items = [0,1,2,3,4,5,6,7];
  selectedItems=[2,6];
  let remainingItems = not(items, selectedItems);  
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  const [checked, setChecked] = useState([]);
  const [right, setRight] = useState(remainingItems);
  const [left, setLeft] = useState(selectedItems);
  console.log(right);                  //  [0,1,3,4,5,7]     
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  console.log(left);                   //  [2,6]          
  ...
  

What is going on? )))

Answer 1

Material-UI has helpful documentation with examples of how to use components. Take a look at Material-UI Simple Transfer List Example

Below I have modified their docs about how to use TransferList. This should get you started on a solution.

...

export default function TransferList(props) {
  const classes = useStyles();
  const [checked, setChecked] = React.useState([]);
  const [left, setLeft] = React.useState(props.selectedItems);
  const [right, setRight] = React.useState(not(props.Items, props.selectedItems));

...

Answer 2

Eventually useEffect worked without props.items, i suppose it is because props.items dont change, while props.selectedItems does. I'll leave the code here.

... 

    useEffect(() => {    
        let remainingItems = not(props.items, props.selectedItems);
        setRight(remainingItems);
        setLeft(selectedItems);
        console.log(right);                    //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
        console.log(remainingItems);         //  [0,1,3,4,5,7] 
        console.log(left);                     //  []                    ?????????????????????????!!!!!!!!!!!!
      }, [props.selectedItems]);

...