Blinking of component when there is a wrong value in search bar

I got react app where in the home page I got 3 components which they have data from cms (cached by swr). I suppose there are 3 re-renders of the page because I got 3 components which contains data from the cms and they are changed every search query because they got different data everytime. However there is no performance issue, but I've seen that when I type some random stuff which doesn't match the data from my database and then start typing one letter one by one there is blink of <ProductCard /> and then shows that <DataNotFound /> with the information that there is no data matching my query in database. Is it possible to fix it?

// some code above
return (
 <PageLayout title='Home' description='Fake Sugar - sklep internetowy'>
      {!data ? <Spinner /> : null}

      {/* TopBar Navigation Start*/}
      <TopBarNavigation
        sugarsConnection={data.sugarsConnection}
        setSkip={setSkip}
        skip={skip}
        categoryPath={router.pathname}
        debounced={debounced}
      />

      {/* If there is no searchValue in database \/ */}
      <DataNotFound sugarsConnection={data.sugarsConnection.edges} />

      {/* TopBar Navigation End*/}

      {/* Main content start */}

      <MotionGrid
        templateColumns={{
          base: 'repeat(1, 1fr)',
          md: 'repeat(2, 1fr)',
          xl: 'repeat(3, 1fr)',
        }}
        gap={4}
      >
        <AnimatePresence>
          {data?.sugarsConnection?.edges?.map((product) => (
            <Box key={product.node.slug}>
              <ProductCard
                title={product.node.title}
                brand={product.node.brand}
                price={product.node.price}
                coverImage={product.node.coverImage.url}
                id={product.node.id}
                slug={product.node.slug}
                stock={product.node.stock}
                isOnDiscount={product.node.isOnDiscount}
                discountValue={product.node.discountValue}
                isNewProduct={product.node.isNewProduct}
              />
            </Box>
          ))}
        </AnimatePresence>
      </MotionGrid>

      {/* Main content end */}

      {/* Pagination menu on the bottom for mobile devices \/ */}

      {data.sugarsConnection.edges.length > 0 && (
        <Box display={{ base: 'block', md: 'none' }}>
          <Pagination
            hasPreviousPage={data.sugarsConnection.pageInfo.hasPreviousPage}
            hasNextPage={data.sugarsConnection.pageInfo.hasNextPage}
            skip={skip}
            setSkip={setSkip}
          />
        </Box>
      )}
    </PageLayout>
  );
};

export default IndexPage;

video showing the problem: Youtube video showing the blinking of ProductCards or just visit my website: https://drogi-cukier.vercel.app/ and start typing random stuff in search bar and then type a letter one by one and see what happens

my github repo with full code: https://github.com/bubuq3/fake-sugar-shop/blob/main/pages/index.tsx