geting the transaction hash of an ethereum transaction

Question

const handlewriteData = async () => {
  const { contract } = state;
  const manufacturerName = document.getElementById('tradingNameInput').value;
  const registrationNumber = document.getElementById(
    'registrationNumberInput'
  ).value;
  const email = document.getElementById('businessEmailInput').value;
  const bussPhone = document.getElementById('phoneInput').value;
  const geoAddress = document.getElementById('addressInput').value;

  const web3 = new Web3('http://localhost:7545');

  const addresses = await web3.eth.getAccounts();

  if (state.contract) {
    try {
      const gas = await contract.methods
        .registerManufacturer(
          manufacturerName,
          registrationNumber,
          email,
          bussPhone,
          geoAddress
        )
        .estimateGas({ from: addresses[0] });

      const tx = await contract.methods
        .registerManufacturer(
          manufacturerName,
          registrationNumber,
          email,
          bussPhone,
          geoAddress
        )
        .send({
          from: addresses[0],
          gas: gas, // Set the estimated gas value
          gasPrice: web3.utils.toWei('10', 'gwei'), // Optional: Set a reasonable gas price
        });
      setTransactionHash(tx.transactionHash);

      console.log(tx);

      window.location.reload();
    } catch (error) {
      console.error('Error:', error);
    }
  }
};

I want to retrieve the transaction hash and use it to create a qr code when i call the function with a button click im getting a null value which is the instantiated value but i can see the transactions on ganache what is the correct way of getting the transaction hash from a receipt it seems my code is not fetching it correctly

tried chart gpt but no help

I'm using truffle framework, reactjs, and web3js