Now I have code like this

  {data.inventoryOn === true ? (
      <div className="inventoryOptions flex__container-v">
        <Link to="listofmedicines" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">List Of Medicines</p>
          </div>
        </Link>
        <Link to="medicinegroups" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">Medicines Groups</p>
          </div>
        </Link>
      </div>
    ) : null}
    {data.spaceBelow ? <div className="space" /> : null}

as you might have noticed for the code to appear it depends on some state value to be true.

My question is how do I get it to appear smoother. I cant transition it because I don't know the property like background or color or something else. And the content is not hidden for me to transition using opacity since it is completely not available when the state value is not true.

how can I achieve this?