How to update the list of options of an Autocomplete component after its rendering

I have this function which get a JSON array from an URL containing list of options that I want to show as option in my Autocomplete component.

function ShowMovies() {
    async function GetMovies() {
        movies_list = await fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'authorization': token
            },
        }).then(response => movies_list = response.json());
    }
    GetMovies();

    return ( <Autocomplete multiple freeSolo disablePortal id = 'movies'
        name = 'movies'
        options = {
            movies_list
        }
        getOptionLabel = {
            (option) => option.movie_name
        }
        renderInput = {
            (params) => < TextField {
                ...params
            }
            label = 'New movies:' / >
        }
        />
    );
    export default ShowMovies;

However, this fails to load returned options and gives me below warning. Which is according to my understanding is because at the time I am binding this to the component the fetch request is still ongoing.

Warning: Failed prop type: The prop `options` is marked as required in `ForwardRef(Autocomplete)`, but its value is `undefined`.

How can I delay this binding until the request is completed?

On the first run this function will return the the <AutoComplete [...] /> component. Clearly movies_list is undefined, because it would eventually get populated asynchroniously. That HTTP call will surely take longer than the rendering.

Then you have to be aware of two other things:

1. The function GetMovies will be defined again on every render / call of your component function which is just unnecessary.
2. The call GetMovies() is not "awaited", and even worse: it is one of the worst places in a React Function component to place that call.

To show you a better way, let me rewrite your construct with JS - Pseudo code - it will show you the schematics and you can easily translate that into JavaScript.

function ShowMovies() {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        fetch('some url', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'authorization': 'some token'
            },
        }).then(response => response.json())
        .then(json => setMovies(json));
    }, []);

    return <Autocomplete
        multiple
        freeSolo
        disablePortal
        id="movies"
        name="movies"
        options={movies}
        getOptionLabel={(option) => option.movie_name}
        renderInput={(params) => <TextField {...params} label="New 
movies:" / >}
        />;
}

More details:

The fact, that you query further resources (via that http call) after the component has been rendered is called a "side effect" (not only) in react world. It shall happen in parallel to your rendering logic. The useEffect hook is perfectly suited for this kind of problem. Please read the documentation! Whatever ... used the useEffect hook in this way, with those parameters it just runs once after the component has rendered for the first time. That's the best moment to query for the data. When the response arrives you put it into a state (useState) object, which in turn forces the component to update (render again), but this time with the data at hand you just set.

I hope this is a good starting point.

Read the react hooks docs!

Watch some nice beginner react tutorials!