value on autocomplete not changing when state updated

Im having difficulties on changing the autocomplete value, every time I click swap button.

I have application with 2 autocomplete, from and to. After click the swap button, Inside the swap function I will toggle the state from and to

The toggle of the state works but the value in autocomplete input not change. How can I achieved this? Thank you

below is the code and as well codeSandbox https://codesandbox.io/s/combobox-material-demo-forked-yup8d?file=/demo.js

export default function ComboBox() {
  const [from, setFrom] = useState({});
  const [to, setTo] = useState({});

  const onChangeTo = (e, value) => {
    setTo(value);
  };

  const onChangeFrom = (e, value) => {
    setFrom(value);
  };

  const swap = () => {
    setFrom(to);
    setTo(from);
  };
  return (
    <>
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        options={top100Films}
        value={from.label}
        sx={{ width: 300 }}
        onChange={(e, value) => onChangeFrom(e, value)}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        options={top100Films}
        value={to.label}
        sx={{ width: 300 }}
        onChange={(e, value) => onChangeTo(e, value)}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
      <Button variant="outlined" onClick={() => swap()}>
        SWAP
      </Button>
    </>
  );
} 

You can provide valid, defined initial state so the inputs remain as controlled inputs.

const [from, setFrom] = useState({ label: '' });
const [to, setTo] = useState({ label: '' });