これらのコードを使用してMuiDataTable内にデータを配置するにはどうすればよいですか？

のようなキーとして、列名でフォーマットされたオブジェクトの配列を渡す必要があります
{"Display Name": value, Email:other value}。
次のように、状態をコンストラクターに渡す必要があります。

 constructor() {
    super();
    this.state = { users: [] };
  }

次にthis.state.users、次のようにMUIDataTableの小道具データに渡す必要があります。

 <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />

この例では、axios ro fetch dataを使用しましたが、これはfirestoreで次のように機能します。

import MUIDataTable from "mui-datatables";
import { Component } from "react";
import * as axios from "axios";
class UserTable extends Component {
  columns = ["Display Name", "Email"];
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    axios
      .get("/users.json")

      .then((res) => {
        const userData = res.data.map((u) => {
          return {
            "Display Name": u.name,
            Email: u.email
          };
        });
        console.log(userData);
        this.setState({
          users: userData
        });
      })
      .catch((error) => console.log(error));
  }
 
  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default UserTable;

あなたのコードでこれは次のようになります：

import MUIDataTable from "mui-datatables";
import { Component } from "react";
import * as axios from "axios";
class UserTable extends Component {
  columns = ["Display Name", "Email"];
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
 firestore.collection('users')
            .get()
            .then( snapshot => {
                const users = []
                snapshot.forEach(doc => {
                    const data = doc.data()
                    users.push({"Display Name":data.displayName, Email: data.email});
      
                });
                  return users;})
             .then(userList => this.setState({users:userList});
              
            })
        .catch(error => console.log(error))
   
  }

  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default UserTable;

更新：
ここでは、firestoreの実用的な例を見つけることができます