React Table filtering data fetched from API

Question

I am working with the react-table. Using data from API then storing into the state.

I don't have a good idea for filtering data. I have a table with pagination, and upside I need to put 3 inputs (one for name, one for the surname and last for father's name). In data (from API) it looks like (name: name (name of father) surname). But that does not matter right now. I need a solution to handle this search bar. So it should be a classic dynamic search. When you write something inside it must re-render the table and show a result that is equal to the input.

import React, { useState, useEffect } from "react";
import { useTable, usePagination } from "react-table";
import styled from "styled-components";
import apiRequest from "helpers/apiRequest";
import Header from "../../../components/Header/Header";
const Styles = styled.div`
  padding: 1rem;
  .inputs {
    margin: 1rem auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  table {
    width: 90%;
    margin: auto;
    height: 700px;
    border-spacing: 0;
    border: 1px solid black;
    thead {
      background: #231f20;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #ffffff;
    }
    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }
    td {
      font-size: 14px;
      line-height: 20px;
      /* identical to box height, or 143% */

      /* gray/500 */

      color: #6b7280;
      :first-child {
        color: #111827;
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
      }
    }
    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }

  .pagination {
    padding: 1rem 0;
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .buttons {
      button {
        margin-left: 1rem;
      }
    }
  }
`;
const Button = styled.button`
  padding: 9px 17px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
`;
const Input = styled.input`
  width: 350px;
  height: 40px;
  padding: 9px 13px;
  border: 1px solid #000000;
  border-radius: 8px;
`;
function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page,
    // which has only the rows for the active page

    // The rest of these things are super handy, too ;)
    canPreviousPage,
    canNextPage,
    pageOptions,
    nextPage,
    previousPage,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 },
    },
    usePagination
  );

  // Render the UI for your table
  return (
    <>
      <div className="inputs">
        <Input type="text" placeholder="Unesi ime " />
        <Input type="text" placeholder="Unesi ime oca " />
        <Input type="text" placeholder="Unesi prezime " />
      </div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      {/* 
          Pagination can be built however you'd like. 
          This is just a very basic UI implementation:
        */}
      <div className="pagination">
        <span>
          Prikazuje se {""}
          <strong>
            {pageIndex + 1} od {pageOptions.length}
          </strong>{" "}
          rezultata
        </span>
        <div className="buttons">
          <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
            Prethodna stranica
          </Button>{" "}
          <Button onClick={() => nextPage()} disabled={!canNextPage}>
            Sljedeća stranica
          </Button>{" "}
        </div>
      </div>
    </>
  );
}

const TablePage = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const getData = async (parsed) => {
    try {
      const response = await apiRequest({
        method: "get",
        url: `spisak-srebrenica`,
      });
      if (response.status === 200) {
        setData(response.data);
        setIsLoading(false);
      }
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  const columns = [
    {
      Header: "ID ŽRTVE",
      accessor: "id_grobnog_mjesta",
    },
    {
      Header: "IME (OCA) PREZIME",
      accessor: "ime_prezime",
    },
    {
      Header: "GODINA ROĐENJA",
      accessor: "godina_rodjenja",
    },
    {
      Header: "VIŠE",
      Cell: ({ cell }) => <Button position="table">više</Button>,
    },
  ];

  return (
    <div>
      <Header />
      {console.log(data)}
      <Styles>
        <Table column={columns} data={data} />
      </Styles>
    </div>
  );
};

export default TablePage;