Text rendering issue in Safari on Mac with React contenteditable

Question

I'm encountering a problem with text rendering specifically on Safari on Mac with size greater than 13 inch (on 13 inch the text is shown normally), when using a react-contenteditable. The text is not displaying properly; it appears to be cut off or partially visible. When I click outside the text area of react-contenteditable, the text is then re -rendered properly and fully visible.

Here's a simplified version of the React component I'm using for the 'contenteditable' functionality:

   <ContentEditable
            id="custom-text-editable"
            className={classNames('textarea-input-gilroy', { 'gilroy-caret-style': toggleCaret })}
            onChange={onChangeText}
            onPaste={handlePasteInGpt}
            onKeyDown={handleKeyDown}
            onClick={handleClickInsideDiv}
            html={chatLoading ? '' : valueHtml}
            suppressContentEditableWarning
            spellCheck="false"
            draggable={false}
            placeholder=""
            innerRef={contentEditableRef}
            disabled={chatLoading || isEditChatFlag}
          />

Here is a short video of the issue, showing text behavior on chrome and safari on the same device.

Issue video link