Preventing <textarea> resizing in React application

I'm currently developing a React application where I've encountered an issue with the <textarea>element. I've set the rows attribute to 6 to initially limit its size, but users can resize it manually by dragging the corner. Here's a simplified version of my code:

<div className="mb-4">
  <textarea
    name="snippet"
    placeholder="Enter your snippet here..."
    className="w-full px-4 py-2 bg-[#2E2E2E] text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
    rows={6}
  ></textarea>
</div>

What I've Tried

Using Inline Styles: I attempted to use inline styles such as style={{ width: "100%", height: "150px" }} directly on the <textarea>, but this did not prevent resizing.

CSS Classes: Applying CSS classes with fixed dimensions, like .fixed-size-textarea { width: 100%; height: 150px; }, and using it on the <textarea> did not work as expected.

Event Handlers: I experimented with JavaScript event handlers (onResize, onDrag, etc.) to intercept and prevent resizing actions, but this approach wasn't effective.

Third-Party Libraries: I considered integrating third-party libraries or frameworks to manage <textarea> resizing behavior, but encountered compatibility issues.

Issue Description

Despite multiple attempts, I'm unable to prevent users from resizing the or enforce a fixed size once it's rendered. I'm looking for guidance on alternative approaches within React or CSS that can reliably maintain the size as specified, regardless of user interaction.

Question

Could someone suggest alternative methods or strategies within React or CSS to ensure the size remains fixed and resizing is disabled effectively? Any insights or examples would be greatly appreciated!