I have a React app, the state is managed with Redux.

The user can search for a game and a multitude of results, whose titles loosely match the query, will appear on submitting. Every time the user enters another query, the previous results are replaced by the new ones.

After 5-6 searches, the app slows down considerably. After the 7th search, it stops working entirely, Chrome throwing a 'page not responding' notice.

The redux slice looks like this:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import rawg from '../../apis/rawg';

const initialState = {
  results: [],
};

export const fetchGames = createAsyncThunk(
  'gamesSearch/fetchGames',
  async (query) => {
    const response = await rawg.get('/games', {
      params: {
        search: query,
      },
    });

    return response.data.results;
  }
);

const gamesSearchSlice = createSlice({
  name: 'gamesSearch',
  initialState,
  reducers: {},
  extraReducers: {
    [fetchGames.fulfilled]: (state, action) => {
      const results = action.payload;

      const parsedResults = results.map((result) => {
        return {
          name: result.name,
          slug: result.slug,
          backgroundImage: result.background_image,
          genres: result.genres.map((genre) => genre.name).join(', '),
          id: result.id,
          released: result.released
            ? `${result.released.split('-')[2]}.${
                result.released.split('-')[1]
              }.${result.released.split('-')[0]}`
            : null,
        };
      });
    },
  },
});

export default gamesSearchSlice.reducer;

export const selectResults = (state) => state.gamesSearch.results;

And the component from which the fetch is dispatched looks like so:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

import { fetchGames } from './gamesSearchSlice';

const SearchBar = () => {
  const [query, setQuery] = useState('');
  const dispatch = useDispatch();

  const onSubmit = (e) => {
    e.preventDefault();

    if (!query) return;

    dispatch(fetchGames(query));
  };

  return (
    <div className="searchbar">
      <form onSubmit={onSubmit}>
        <input
          className="searchbar__input"
          type="text"
          placeholder="Search for a game..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </form>
    </div>
  );
};

export default SearchBar;

Am I missing some detail about how React and Redux work together, or is it something wrong with my code from a fundamentals perspective (meaning: I am not handling data efficiently enough with JavaScript)?