Why redux async thunk work 3 times but returns 2 time undefined on my code

Question

i get data from an api, when i submit the form send my form data to redux async thunk 3 times but last 2 sending, form data go as undefined to async thunk

her is my thunk function

export const getSearchMoviesAsync = createAsyncThunk(
  "searchmovies/getSearchMoviesAsync",
  async (data) => {
    const res = await axios(`${process.env.REACT_APP_API}/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&query=${data}&page=1`);
    console.log(data)
    return res.data;
  }
);

here is my form submit function

  const [movie,setMovie] = useState("");


  const handleSubmit = (e)=>{
    e.preventDefault();
    console.log(movie)
dispatch(getSearchMoviesAsync(movie));
setMovie("")
  }

here is my slice

export const searchSlice = createSlice({
    name:'searchmovies',
    initialState:{
        items:[],
        isLoading:false,
        error:null,
        pending:false,
        control:false

    },
    reducers:{
        changePending:  (state) =>{
            state.control = false

        }
    },
    extraReducers: (builder) =>{
        builder
        .addCase(getSearchMoviesAsync.pending,(state,action)=>{
            state.isLoading=true;
            state.pending=true;

        })
        .addCase(getSearchMoviesAsync.fulfilled,(state,action)=>{
            state.items = action.payload;
            state.isLoading=false;
            // state.pending=false;
            state.control=true
            // console.log("items",state.items)
        })
        .addCase(getSearchMoviesAsync.rejected,(state,action)=>{
            state.isLoading = false;
            state.error = action.error.message;
        })

    }
})

export const {changePending} = searchSlice.actions