react-table show input in editable cell only when the cell is clicked

I am working on react-table library and trying to make editable cells and only when I click on a cell it should show the input box for editing. But, it shows the input box always.

Here is what I have done https://codesandbox.io/s/strange-wildflower-g9cqif?file=/src/App.js

Any idea what am I missing?

You can refer to the react-table documentation: https://react-table.tanstack.com/docs/examples/editable-data

We can update the style of input so that only on click one will know it is an input box, as done in the documentation.

input {
       font-size: 1rem;
       padding: 0;
       margin: 0;
       border: 0;
      }

Whole code:

th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
      input {
        font-size: 1rem;
        padding: 0;
        margin: 0;
        border: 0;
      }
    }