react-quill component disappears when I start Typing in it or in any other input field

I have a react app where I am using Quill editor to create a post. The editor completely disappears whenever I start typing on any of the fields including the quill editor.

Here's my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const CreatePost = () => {
const modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'],          // toggled buttons
['blockquote', 'code-block'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],       // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }],           // outdent/indent
[{ 'direction': 'rtl' }],                           // text direction
[{ 'size': ['small', false, 'large', 'huge'] }],    // custom dropdown
[{ 'color': [] }, { 'background': [] }],            // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['link'],
['clean'],                                          // remove formatting button
['video']                                       
]
};
const htmlFormats = [
'header',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image'
];
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [banner, setBanner] = useState('');
const createNewPost = (e) => {
e.preventDefault();
const data = new FormData();
data.set('title', title);
data.set('content', content);
data.set('banner', banner);
console.log(banner)
}
return (
<>
<div className="p-4 lg:ml-16">
<div className="p-4 mt-14">
<h2 className='text-center font-Play font-semibold text-2xl mb-10'>Create your story...</h2>
<div className='grid gap-4 grid-cols-10 h-full'>
<div className=' h-fit w-full col-span-10'>
<form onSubmit={createNewPost}>
<label htmlFor="title" className="block text-sm font-medium text-gray-700">Ttile</label>
<div className="mt-1">
<input value={title} onChange={e=>setTitle(e.target.value)} type='text' id="title" name="title" className="resize-none mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Title goes here" required></input>
</div>
<label htmlFor='image-upload' className="mt-6 mb-2 block text-sm font-medium text-gray-700">Select a banner</label>
<input type="file" onChange={e => setBanner(e.target.files)} id='image-upload' name='banner' accept="image/*" className='rounded-md' required></input>
<label htmlFor='body' className="mt-6 mb-2 block text-sm font-medium text-gray-700">Body</label>
<div>
<ReactQuill value={content} onChange={newValue => setContent(newValue)}  modules={modules} htmlFormats={htmlFormats} id="body" placeholder='Type Content...' ></ReactQuill>
</div>
<button type="submit" className="mt-8 text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Create</button>
</form>
</div>
</div>
</div>
</div >
</>
)
}
export default CreatePost

<!-- end snippet -->

I tried following the previous answers regarding this, but none actually helped.

This is before I start typing

This is when I started typing

Moving modules declaration outside component resolved this issue for me.

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const modules = {
// Your module settings
}
const CreatePost = () => {
// your component
};

Moving modules outside the component can solve issue. Make sure if you using any handlers for image or anything put them outside as well.

moving modules outside the component or if you still want using modules inside the component, use useMemo for it