JSON response issue with openai chat

API
1 
import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo-1106',
    stream: true,
    messages: messages,
    response_format: { type: "json_object" }
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

This is my route. I am making a call here with the messages array. This is the frontend call:

async function handleSubmit() {
    setCompletion('');
    const messages = [
      {
        role: 'system',
        content:
          'BookMatch is a service that helps you find books similar to the one you just read. ',
      },
      {
        role: 'user',
        content: `
        These are the filtered books based on the tags of the user selected book from our entire library. Here similarity percentage is calculated based on the tags of the books:
        ${similarBooks}
        Generate book briefs automatically in the above data where the abstract is null based on title, tags.
        The user read this book: ${selectedBookData.title} with ddn number: ${selectedBookData.ddn}.
        The user liked this book because: ${state.like}.
        The user wants to read this book next: ${state.next}.

        Based on the user's preferences, recommend 5 books that are similar to the book the user just read and would like to read next.
        Use the filtered Book data as the dataset to recommend books and suggest books from that only. Don't suggest books that are not in the filtered data.
        Suggest the books based on what the user liked about the book, what the user wants to read next and the filtered data.
        Return the response as collection of objects with each object in this format:
          Book Name-
          Author name-
          Book Brief- (one line)
          Rationale for recommendation-
          Where to find the book?- (location) from the library

          Return the response in json format. Make sure to return the response in proper json format using proper characters and spacing. Return the response properly formatted.
      `,
      },
    ];
    const response = await fetch('/api/converse', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        messages
      }),
    });
    const data = response.body;
    if (!data) {
      console.log('No data');
      return;
    }
    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;

    while (!done) {
      const { value, done: doneReading } = await reader.read();
      done = doneReading;
      const chunkValue = decoder.decode(value);
      setCompletion((prev) => prev + chunkValue);
    }
    setCompletionDone(true);
  }

The completion is like this when i console log it after it is generated:

0:"{\n"
0:" "
0:" \""
0:"recommended"
0:"_books"
0:"\":"
0:" [\n"
0:"   "
0:" {\n"
0:"     "
0:" \""
0:"Book"
0:" Name"
0:"\":"
0:" \""
0:"Harry"
0:" Potter"
0:" and"
0:" the"
0:" prisoner"
0:" of"
0:" Az"
0:"k"
0:"aban"
0:"\",\n"
0:"     "
0:" \""
0:"Author"
0:" name"
0:"\":"
0:" \""
0:"J"
0:".K"
0:"."
0:" Rowling"
0:"\",\n"
0:"     "
0:" \""
0:"Book"
0:" Brief"
0:"\":"
0:" \""
0:"Join"
0:" Harry"
0:","
0:" Hermione"
0:","
0:" and"

If i paste this in chatgpt, it says that this is a json-like structure and properly formats and prints this. But how can i convert this to proper json to use in my application?