In my project using React and MUI 5, there is a <div>{text}</div> element with a custom border style. The text variable is a string that gets initialized and updated using the setText function.
Initially, when the text variable is empty, the width of the div element is small. However, as the text gets updated, the width of the div grows abruptly without any smooth transition. I tried adding a CSS transition property to the width in the CSS class of the div, but it did not work as expected.
I am looking for a way to achieve a smooth transition of the width when the text updates. Any suggestions on how to achieve this?