How Can we implement rich text editing functionality of react-draft-wysiwyg (npm package) editor in every text filed in my project?

Question

 <div className="mb-4">
            <label htmlFor="tasks" className="block mb-1">
              Tasks
            </label>
            {tasks.map((task, index) => (
              <div key={index} className="flex items-center mb-2">
                <input
                  type="text"
                  className="flex-1 border rounded-md px-3 py-2 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-600"
                  placeholder="Enter task"
                  value={task.task}
                  onChange={(e) => this.handleTaskChange(index, e.target.value)}
                  required
                />
                <div className="flex items-center space-x-4">
                  <label className="mr-2">Status:</label>
                  <label className="mr-2">
                    <input
                      type="radio"
                      name={`status-${index}`}
                      value="Done"
                      checked={task.status === "Done"}
                      onChange={() => this.handleStatusChange(index, "Done")}
                    />
                    Done
                  </label>
                  <label>
                    <input
                      type="radio"
                      name={`status-${index}`}
                      value="Pending"
                      checked={task.status === "Pending"}
                      onChange={() => this.handleStatusChange(index, "Pending")}
                    />
                    Pending
                  </label>
                </div>
                {index > 0 && (
                  <button
                    type="button"
                    className="text-red-600"
                    onClick={() => this.removeTask(index)}
                  >
                    Remove
                  </button>
                )}
              </div>
            ))}
            <button
              type="button"
              className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors"
              onClick={this.addTask}
            >
              Add Task
            </button>
          </div>

  <div>
            <label
              htmlFor="projectName"
              className="block text-gray-700 font-bold mb-2"
            >
              Project Name
            </label>
            <input
              type="text"
              id="projectName"
              value={projectName}
              onChange={(e) => this.setState({ projectName: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
            />
          </div>
<div className="mb-4">
            <label htmlFor="editor" className="block mb-1">
              Text Editor
            </label>
            <Editor
              editorState={editorState}
              toolbarClassName="toolbar-class"
              wrapperClassName="wrapper-class"
              editorClassName="editor-class"
              onEditorStateChange={this.handleEditorChange}
              placeholder="Enter text here..."
            />
          </div>

here I Have many text fields where I want to use the functionality of text editing using this editor, but I cant ,I can only use that functionality in its own text-field. for example, I have a filed here named as Project name where I want to use the bold and italic font functionality of the react-draft editor but I cant. so how to access the functionality in all text-field wherever I write

I had tried using inline text-editing but yet it was not working