JSX, React-pdf table create a table, which filter those undefined

Question

I have an array that contains the element with the number from 1-20.

[{ region1:"America", "country1": "US", service1: "mobile" }, { region2: "Asia", country2: "JP", service2: "security" }, ... { region20:undefined, country20: undefined, service20: undefined },]

How do I create a new array, with [{region: "", country:"US", service:"mobile" }, { region: "Asia", country: "JP", service2: "security" }] and also to filter the undefined and null.

My coding without syntax error, but failed to run. The tag would highligted with error.

react-dom.development.js:18687 The above error occurred in the component:

at PDFViewer (http://localhost:3000/static/js/bundle.js:136644:20)
at div
at div
at B505 (http://localhost:3000/main.8c1bc629fe90c8d943f4.hot-update.js:1838:74)
at Route (http://localhost:3000/static/js/bundle.js:273581:29)
at Switch (http://localhost:3000/static/js/bundle.js:273783:29)
at div
at div
at Router (http://localhost:3000/static/js/bundle.js:273200:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:272821:35)
at div
at B5CreateProject (http://localhost:3000/static/js/bundle.js:58545:5)
at Route (http://localhost:3000/static/js/bundle.js:273581:29)
at Switch (http://localhost:3000/static/js/bundle.js:273783:29)
at main
at Router (http://localhost:3000/static/js/bundle.js:273200:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:272821:35)
at App (http://localhost:3000/static/js/bundle.js:729:72)

   <div>
            
  
        {
                   
          `${PIFForm.PIFForm.B602Region[numbers]}`
            .filter(
              (result) =>
                result.B602Region[numbers]!== undefined
            )
            .map((result, index) => (
              ( result !="" && (
              <Table 
                data={[
                  {
                  region: `${result.B602Region[numbers]}`,
                  country:`${result.B602.B602Country[numbers]}`,
                  service: `${result.B602.B602Country[numbers]}`,
                  }
                ]}
              >
                           
                        <TableHeader textAlign={"center"}>
                          <TableCell  >
                              Region
                          </TableCell>
                          <TableCell  >
                              Country
                          </TableCell>
                          <TableCell>
                              Service
                          </TableCell>
                        </TableHeader>
                        <TableBody >
                          <DataTableCell getContent={(r) => r.region}/>
                          <DataTableCell getContent={(r) => r.country}/>
                          <DataTableCell getContent={(r) => r.services}/>
                        </TableBody>
                        
                      </Table>
                     
             ) ))
                 ) 
        }
                    
      

      </div>
   
    <Text
    style={styles.pageNumber}
    render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`}
    fixed
  />
  
   </div>
</Page>

);