'HotTable' component not rendering while passing "non-commercial-and-evaluation" as license key

I'm using Handsontable for my first time with React18 (Vite6), and the fisrt thing I recreated was the example they provided in their installation docs.

I've noticed this example has the line licenseKey="non-commercial-and-evaluation" passed as a prop to their main component called HotTable, like this:

<HotTable
  data={[
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13]
  ]}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation"
/>

At first, it didn't rendered anything. Just a blank page, but as I removed the licenseKey prop, it started to render the table with a message saying "The license key for Handsontable is missing.":

Now, the question is, do I need a license key to use Handsontable, or did I do any other thing wrong?

Edit: StackBlitz link and GitHub repo link.

Handsontable can be used for free for non-commercial and evaluation purposes. If you intend to use it for a commercial project before going live, you'd need to purchase a license. You can read more about it at https://handsontable.com/docs/javascript-data-grid/software-license/ and ask sales@handsontable.com to specify if you qualify for the non-commercial use if that is unclear.