задача сделать загрузку данных в компоненте асинхронно

class Table extends Component {
    constructor(props) {
      super(props);
      this.state = {
        droplets: [],
        allSelected: false
      }
      this.toggleSelectAll = this.toggleSelectAll.bind(this);
      this.toggleSelect = this.toggleSelect.bind(this);
    }
    componentDidMount() {
      fetch('http://api.npoint.io/324f4ca2cdd639760638')
      .then(res => res.json())
      .then(droplets => this.setState({ 'droplets': droplets }))
    }
    toggleSelect(dropletToToggle) {
      this.setState((prevState) => {
        const newDroplets = prevState.droplets.map((dplt) => {
          if (dplt === dropletToToggle) {
            return { ...dplt, checked: !dplt.checked };
          }
          return dplt;
        });
  
        return {
          ...prevState,
          droplets: newDroplets,
          allSelected: newDroplets.every((d) => !!d.checked)
        };
      });
    }
  
    toggleSelectAll() {
      this.setState((prevState) => {
        const toggle = !prevState.allSelected;
        const newDroplets = prevState.droplets.map((x) => ({
          ...x,
          checked: toggle
        }));
  
        return {
          ...prevState,
          droplets: newDroplets,
          allSelected: toggle
        };
      });
    }
    render() {
      return (
        <div className="body">
          <div className="title">Таблица пользователей</div>
          <table className="panel">
            <Tablehead
              toggleSelectAll={this.toggleSelectAll}
              allSelected={this.state.allSelected}
            />
            <tbody className="row">
              <TableBody
                droplets={this.state.droplets}
                toggleSelect={this.toggleSelect}
              />
            </tbody>
          </table>
          <button className="button">Удалить выбранные</button>
        </div>
      );
    }
  }
  
  export default Table;

я пробую менять этот кусок кода:

componentDidMount() {
      fetch('http://api.npoint.io/324f4ca2cdd639760638')
      .then(res => res.json())
      .then(droplets => this.setState({ 'droplets': droplets }))
    }

на это

async componentDidMount() {
     const res = await fetch('http://api.npoint.io/324f4ca2cdd639760638')
           res.json()
          .then(droplets => this.setState({ 'droplets': droplets }))
        }

но не знаю как убрать второй then. В правильном ли я вообще направлении двигаюсь или для асинхронной загрузки этого недостаточно ? https://codesandbox.io/s/keen-babbage-cwkjr?file=/src/Table.jsx