React App crashes giving as useState input give an undefined error

I have create two states for my input elements and used onChange to manipulate their state. Why do I get this error even when I have declared the variables in a destructured array? Can someone explain to me what I am doing wrong please

import { React, useState } from 'react'

export const AddTransaction = () => {

  [transactionName, setTransactionName] = useState('');
  [amount, setAmount] = useState(0);

  return (
    <div>
        <h3>Add new transaction</h3>
        <form className="form">
            <div className="form-control">
            <label for="text">Transaction Name</label>
            <input 
              type="text" 
              className="text" 
              placeholder="Enter name of transaction" 
              value = {transactionName}
              onChange = {(e) => setTransactionName(e.target.value)}
            />
            </div>
            <div className="form-control">
            <label for="amount"> Amount </label>
            <input 
              type="number" 
              className="amount" 
              placeholder="Enter amount"
              value={amount}
              onChange = {(e) => setAmount(e.target.value)}
            />
            </div>
            <button className="btn">Add transaction</button>
        </form>
    </div>
  )
}

My app crashes with the below attached error -

Compiled with problems:X

ERROR


src\components\AddTransaction.js
  Line 5:4:    'transactionName' is not defined     no-undef
  Line 5:21:   'setTransactionName' is not defined  no-undef
  Line 6:4:    'amount' is not defined              no-undef
  Line 6:12:   'setAmount' is not defined           no-undef
  Line 18:24:  'transactionName' is not defined     no-undef
  Line 19:34:  'setTransactionName' is not defined  no-undef
  Line 28:22:  'amount' is not defined              no-undef
  Line 29:34:  'setAmount' is not defined           no-undef

Search for the keywords to learn more about each error.

Variables transactionName, setTransactionName, amount and setAmount are not declared. You can either use const or let to declare them.

const [transactionName, setTransactionName] = useState('');
const [amount, setAmount] = useState(0);

Check: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment