Semantic-ui-react did not get fully re-render

I have a component with a condition inside render method, it looks like something like:

import { Form, Message } from "semantic-ui-react";    

Class MyComponent extends React.Component {
  state = { tracking: 1 };

  render() {
    const enable = myArray.length > 0
    
    return (
      {enabled ? (
        <React.Fragment>
          <Form>
           <Form.Dropdown />
           <Form.Input />
           <Form.Button />
          </Form>
        </React.Fragment>
       ) : (<Message warning>Array is empty</Message>)}
    );
  }
}

// perform a setState({tracking: this.state.tracking + 1}) while myArray.length = 0

This component is inside a Semantic-ui-React Popup component.

Somewhere else in my project Im doing some addToMyArray method, and the array length is changing frequently. The problem I'm having is that when myArray.length = 0, the component does not change to "Array is empty", it still shows the Form.Dropdown, Form.Input, and Form.Button, until I reopen the popup window, it changes to "Array is empty".

Why did it not change the component in real time? It suppose to re-render when I delete the last element inside the array, the component shows "array is empty" in real time. Is it because something is blocking the re-render method?