I need to load more items in a table using React. When I click on the Load More button, the application should keep the previous items and load more items. I tried to perform this action in the handleClick function, however, the code did nothing. My current code is:

export function TableClients({ result, title }: ITableComponent) {
  const [clients, setClients] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const clientsPerPage = 10;
  const [displayedClientsCount, setDisplayedClientsCount] = useState(clientsPerPage);

  useEffect(() => {
    const fetchClients = async () => {
      const response = await axios.get('http://localhost:8080/api/clients', {
        params: {
          page: currentPage - 1,
          size: clientsPerPage,
        },
      });

      setClients(response.data.content);
    };
    fetchClients();
  }, [currentPage, searchTerm, sortOrder]);

  const handleClick = () => {
    setDisplayedClientsCount(prevCount => prevCount + clientsPerPage);
  };
  return (
    <Box>
      <TableHeader
        title={title}
        result={result}
      />
      <Table>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Cliente</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
        {clients.slice(0, displayedClientsCount).map((client: IClient, index) => (
            <Table.Tr>
              <Client
              name={(client as IClient).name}
              />
            </Table.Tr>
        ))}
        </Table.Tbody>
      </Table>
      <Flex>
      <Button       
        variant="filled"
        onClick={handleClick}
      >
        Load more
      </Button>
    </Flex>
    </Box>
  );
}```