Solving Cell-alignment issue in BluePrintJS's Table2 object

Question

Following the below stock example of the BlueprintJS Table2 object, I encounter a cell alignment issue as per the attached image from the below.

Do you have any tips on how to get this to display properly?

import React from 'react';
import { Cell, Column, Table2 } from "@blueprintjs/table";
import { HotkeysProvider } from "@blueprintjs/core";
import '@blueprintjs/table/lib/css/table.css';

const MyTableComponent = () => {
    const dollarCellRenderer = (rowIndex: number) => (
        <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
    );
    const euroCellRenderer = (rowIndex: number) => (
        <Cell>{`€${(rowIndex * 10 * 0.85).toFixed(2)}`}</Cell>
    );

    return (
        <HotkeysProvider>
            <Table2 numRows={10}>
                <Column name="Dollars" cellRenderer={dollarCellRenderer}/>
                <Column name="Euros" cellRenderer={euroCellRenderer} />
            </Table2>
        </HotkeysProvider>
    );
};

const App = () => {
    return (
        <div>
            <MyTableComponent />
        </div>
    );
};

export default App;

Expected: Table to display with the correct cell alignment Actual: Non-Header Rows are offset by 'x' number of pixels