Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working

#### Description
I tried to put two tables in one component with different data sources which worked well with the data rending part. However, the paginator didn't work on the second table.

#### Reproduction
Please use StackBlitz to check the issue:
**StackBlitz Project Editor link**: https://stackblitz.com/edit/angular-brxwzo
**StackBlitz Output link**: https://angular-brxwzo.stackblitz.io

#### Steps to reproduce:
1. Create two table
2. Create two data sources with different numbers of elements into it.
3. Bind the data source with the respective data source for eg.
` displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource1 = new MatTableDataSource(myData);
`
**Table 1**
`
`
**Table 2**
` `
4. Create the paginator for the following datasouces:
` @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatPaginator, {static: true}) paginator2: MatPaginator;`
5. Only the first paginator will work in the output.

#### Expected Behavior

Like the first table pagination, the second table pagination should also work independently to the first as the data sources are different, the paginator pointing instance is different.

#### Actual Behavior

Only the first table pagination is working rest of all other table pagination are begin ignored.

#### Environment

- Angular: 9.0.5
- CDK/Material: 9.2.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.01

Open the linked StackBlitz project and reproduce the issue using the two MatTableDataSource and MatPaginator instances described in the steps. Trace the two paginator bindings and verify that each table paginates its own data independently; done means the second paginator works without affecting the first.

Written by the indexing model from the issue text.