Having problem with adding data to mdbtable in react

Question

I was trying to add the data i have to a table using react-table and MDBDataTable for some reason i am getting key error and i was able to form the table but the data is not getting added to the table. you can check

import React from "react";
import styled from "styled-components";
import { useTable, useSortBy, useFilters } from "react-table";
import { MDBDataTable } from "mdbreact";

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  // Render the UI for your table
  return (

function App() {
  const columns = [
    { Header: "Drug", accessor: "drug", width: 550 },
    { Header: "Molecule", accessor: "molecule" },
    { Header: "prediction", accessor: "prediction" }
  ];


  const normalizeData = (data) =>
    Object.keys(data).map((key) => ({
      drug: key,
      molecule: Object.keys(data[key]),
      prediction: Object.values(data[key])
    }));

  const data_two = {
    columns: columns,
    rows: normalizeData(data.result)
  };

  return (
    <Styles>
      {/* <Table columns={columns} data={normalizeData(data.result)} /> */}
      <MDBDataTable striped bordered small data={data_two} />
    </Styles>
  );
}

export default App;