Issue with uploading images to Sanity in a Next.js app and seeking help from the community.

Upload failed: the mutation(s) failed: Insufficient permissions; permission "create" required

export const client = sanityClient({
  projectId: 'k8p6uw8a',
  dataset: 'development',
  apiVersion: '2021-03-25', // use current UTC date - see "specifying API version"!
  token: process.env.NEXT_PUBLIC_SANITY_WRITE_TOKEN,
});

import React, { useState } from 'react';

import { client } from '../src/sanity';

export default function Todos({ todos }) {
  const [todoList, setTodoList] = useState(todos);
  const [userInput, setUserInput] = useState({
    text: '',
    image: '',
  });

  const handleSubmit = async e => {
    e.preventDefault();
    const { _id } = await client.assets.upload('image', userInput.image);

    const newTodo = {
      _type: 'todo',
      text: userInput.text,
      image: {
        _type: 'image',
        asset: {
          _type: 'reference',
          _ref: _id,
        },
      },
    };

    const todo = await client.create(newTodo);
    console.log(todo)
  };

  const handleChange = e => {
    e.preventDefault();
    const value = e.target.type == 'text' ? e.target.value : e.target.files[0];
    setUserInput({ ...userInput, [e.target.name]: value });
  };

  return (
    <div className='max-w-4xl mx-auto '>
      <main className='text-center'>
        <div className='my-8'>
          <h1 className='text-4xl font-bold tracking-tight '>My To-do List</h1>
        </div>
        <form>
          <div className='flex justify-center items-center'>
            <input
              name='text'
              className='w-72 h-12 border p-4 border-blue-100'
              type='text'
              value={userInput.text}
              placeholder='Make coffee.'
              // our function
              onChange={handleChange}
            />
            <div className='my-8'>
              <input type='file' onChange={handleChange} name='image' />
            </div>
          </div>{' '}
          <button
            className='focus:outline-none focus:ring focus:border-blue-800
						px-6 py-2 rounded-xl bg-blue-500 text-blue-50 hover:bg-blue-800 
						font-semibold'
            onClick={handleSubmit}
          >
            Add to do
          </button>
        </form>
        <div className='my-12'>
          <h1
            className='text-xl font-bold tracking-tight 
					my-8'
          >
            Your Todos
          </h1>
          <ul>
            {todoList &&
              todoList.map(todo => <li key={todo._id}>{todo.text}</li>)}
          </ul>
        </div>
      </main>
    </div>
  );
}

export const getServerSideProps = async () => {
  const todos = await client.fetch(`*[_type == 'todo']`);

  return {
    props: {
      todos,
    },
  };
};

/api/uploadForm.js

import { client } from '../../src/sanity';
import multer from 'multer';

async function parseFormData(req, res) {
  const storage = multer.memoryStorage();
  const multerUpload = multer({ storage });
  const multerFiles = multerUpload.any();
  await new Promise((resolve, reject) => {
    multerFiles(req, res, result => {
      if (result) {
        return reject(result);
      }
      return resolve(result);
    });
  });
  return {
    fields: req.body,
    files: req.files,
  };
}

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  const sanityClient = client.withConfig({
    token: process.env.SANITY_WRITE_TOKEN,
  });

  const data = await parseFormData(req, res);

  const { _id } = await sanityClient.assets.upload(
    'image',
    data.files[0].buffer
  );
  const newTodo = {
    _type: 'todo',
    text: data.fields.text,
    image: {
      _type: 'image',
      asset: {
        _type: 'reference',
        _ref: _id,
      },
    },
  };

  const todo = await sanityClient.create(newTodo);

  res.redirect('/');
}

<form
          action='/api/uploadForm'
          method='POST'
          encType='multipart/form-data'
        >
          <div className='flex justify-center items-center'>
            <input
              name='text'
              className='w-72 h-12 border p-4 border-blue-100'
              type='text'
              value={userInput.text}
              placeholder='Make coffee.'
              // our function
              onChange={handleChange}
            />
            <div className='my-8'>
              <input type='file' onChange={handleChange} name='image' />
            </div>
          </div>{' '}
          <button
            className='focus:outline-none focus:ring focus:border-blue-800
						px-6 py-2 rounded-xl bg-blue-500 text-blue-50 hover:bg-blue-800 
						font-semibold'
            // onClick={handleSubmit}
          >
            Add to do
          </button>
        </form>