Not able to intract with elements in the canvas fabric.js

Question

I am new to fabric.js and trying to add text to the canvas. Element is added to the canvas but I am unable to intract with it. I am using react in the frontend.

import React, { useContext } from "react";
import canvasContext from "../../context/canvasContext";
import { fabric } from "fabric";

const AddText = () => {
  const { canvas } = useContext(canvasContext);
  const onAddText = () => {
    const textBox = canvas.add(
      new fabric.Text("Tap To Edit", {
        left: 100,
        top: 100,
        fontFamily: "arial black",
        fill: "#333",
        fontSize: 50,
      })
    );
    canvas.add(textBox);
  };
  return <div onClick={onAddText}>Add Text</div>;
};

export default AddText;

This is my fabric-js settings, is there a property I am missing? Do we have to do enable if with proper setting.

import { useContext, useLayoutEffect } from "react";
import { fabric } from "fabric";
import canvasContext from "../../context/canvasContext";

const canvasStyle = {
  border: "3px solid black",
};

export default function CanvasApp() {
  const { setCanvas } = useContext(canvasContext);

  useLayoutEffect(() => {
    const canvas = new fabric.Canvas("canvas", {
      height: 800,
      width: 1200,
      selectionLineWidth: 1,
      controlsAboveOverlay: true,
      centeredScaling: true,
    });
    canvas.renderAll();
    setCanvas(canvas);
  }, []);

  return <canvas id="canvas" style={canvasStyle} />;
}