I am trying to change my class component to functional component. But the result is different. This is a aggrid customcellrenderer

[  { 
headerName: "Status",     
field: "active",     
tooltipField: "status",     
headerTooltip: "Status",     
cellRenderer: "controlsCellRenderer",     
cellEditor: ToggleSwitch,     
menuTabs: []   } ]

ClassComponent

export default class test extends Component { state = { showActions: false };

handleEdit = () => {this.setState(
  {
    showActions: true
  },
  () => this.api.setRowData(this.state.rows)
);};

ControlsGroup = ({ node }) => 
{ console.log(this.state.showActions); // return true (which is what i want)
return (
  <Form.Check
    type="switch"
    id={`{node.id}`}
    label={node.data.active ? "Active" : "Inactive"}
    checked={node.data.active}
    disabled={!this.state.showActions}
  />
);
};

}`

Functional component

function test({
  //props
}) {
  const [showActions, setShowActions] = useState(false);
  

  useEffect(() => {
    console.log(showActions) // return correctly
  }, [showActions]);

  
  const handleEdit = () => {
    setShowActions(true);

  };

  const controlsGroup = ({ node }) => {
    console.log(showActions); // return false should return true
    

    return (
      <Form.Check
        type="switch"
        id={`${node.id}`}
        label={node.data.active ? "Active" : "Inactive"}
        checked={node.data.active}
        disabled={!showActions}
      />
    );
  };
  }

I want to know why after i change to functional component the showActions is not being updated any more. What other way can i do? i tried using usecallback but it is also not working