how to hide table rows based on an input in react js

i created an app using react js which get te data from a graphql endpoint . the data is displayed in a table and i ant to add a search function . when the attribute name match the input in the search field only the roes that contains that name will stay displayed so basically i ant to hide the other rows

search component :

import React, { useState } from 'react'

const Search = ({ getQuery }) => {
  const [text, setText] = useState('')

  const onChange = (q) => {
    setText(q)
    getQuery(q)
  }

  return (
    <section className='search'>
      <form>
        <input
          type='text'
          className='form-control'
          placeholder='Search characters'
          value={text}
          onChange={(e) => onChange(e.target.value)}
          autoFocus
        />
      </form>
    </section>
  )
}

export default Search

orders list :

import React , { useState, useEffect } from 'react'
import { gql, useQuery } from '@apollo/client';
import Table  from 'react-bootstrap/Table'
import Moment from 'react-moment';
import moment from "moment";
import { Link } from 'react-router-dom';
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { DangerousChangeType } from 'graphql';
import Search from './Search'
import Button from 'react-bootstrap/Button'

const GET_All_Orders = gql`
query Orders($input1: PaginationInput) {
    Orders(input: $input1){
     pageInfo {
       hasNextPage
       hasPreviousPage
     }
     edges{
       cursor
       node {
          id
          closed
          email
          createdAt
          updatedAt
          cancelledAt
          displayFinancialStatus
          displayFulfillmentStatus
          lineItems{
            edges{
              node {
                customAttributes{
                  key
                  value
                }
                id
                quantity
                title
                variant{
                  id
                  image {
                    altText
                    id
                    src
                  }
                  title
                  weight
                  weightUnit
                  price
                }
              }
            }
          }
          shippingAddress { 
            name
          }
         phone
         subtotalPrice
         totalPrice
         totalRefunded
         totalTax
         processedAt
       }
     }
   }
 }
`;


export default function AllOrders({ input1 }) {
  const { loading, error, data  , fetchMore} = useQuery(GET_All_Orders, {
    variables:  {"input1": {
      "num": 20,
      }}
    ,
  });
let date = new Date()
const [query, setQuery] = useState('')
  if (loading) return <h4>読み込み中...</h4>;
  if (error) return `Error! ${error}`;

  return( <div>

<Row > 
    <Col xs={10}> <h5>すべての注文</h5></Col>
    <Col><h5>  日付 : <Moment format="YYYY/MM/DD">
     
 { date}
            </Moment> </h5></Col>
  </Row>
   
 <br/>
 <Table responsive hover size="sm">
  <thead>
    <tr>
    
    <th className="allOrders">注文日</th>
    <th className="allOrders">名前</th>
    <th className="allOrders">注文者メールアドレス</th>
    <th className="allOrders" >配送状態</th>
    <th className="allOrders" >支払状況</th>
      <th className="allOrders" >合計金額</th>
      <th className="allOrders" >詳細</th>
 
    </tr>
  </thead>
  <tbody>
 {data.Orders.edges.map(({ edges ,node :{id , createdAt , displayFulfillmentStatus , displayFinancialStatus , totalPrice , email , shippingAddress: { 
            name
          } }}) => (
    
    
    <tr key={id}>
      
  
      <td>    <Moment format="YYYY/MM/DD">
       {createdAt}
            </Moment></td>
            <td>{ name} </td>  
      <td>{ email} </td>

      {displayFulfillmentStatus == "FULFILLED" ? <td className="success">配送済み</td> :  <td className="failed">未配送</td>}
    
 
 
 
       
      {displayFinancialStatus == "PAID" ? <td>支払済み</td> : <td>未払い</td> }
      <td>{totalPrice} </td>
      <td>  
      <Link to={`/orders/${id}`} className="btn btn-light">
      詳細
          </Link></td>
   
    </tr>
    
    

  ))}
  </tbody>
</Table>
<div className="text-center">
<Button

variant="light"
 onClick={() => {
          

          fetchMore({
            variables:  {"input1": {
              "num": 20,
              "cursor":  data.Orders.edges[data.Orders.edges.length - 1].cursor }},
            updateQuery: (prevResult, { fetchMoreResult }) => {
              fetchMoreResult.Orders.edges = [
                ...prevResult.Orders.edges,
                ...fetchMoreResult.Orders.edges
              ];
              return fetchMoreResult;
            }
          });
        }}
      >
       もっと
      </Button>
      </div>
 </div>
 )}

when i try it inside the map function like :

{query === name ?  <td>  {name}</td> : null }

it works fine but i don't know how to deal with the rows and that logic .