Updating database firewall returns 422

I’m trying to update A database firewall via Digitalocean API using digitalocean function script but It always returns 422. Below is my attempt

const axios = require('axios');

function main(args) {

  const do_token = "DO_PERSONAL_TOKEN";
  const db_cluster = "DATABASE_CLUSTER_UUID";
  const api_url = `https://api.digitalocean.com/v2/databases/${db_cluster}/firewall`;

  const app = async function(){


    let firewall_list = await axios.get(api_url,{
      headers: {
        'Content-Type' : 'text/plain',
        'Authorization': `Bearer ${do_token}`
      }
    })
    .then( res =>{
      return res.data.rules;
    })
    .catch(err=>{
      console.log(err);
      return [];
    });

    let new_rules = { rules: [
        {
          title: "ip_addr",
          value: "20.200.245.247"
        }
      ]
    };

    await axios({
      url: api_url,
      method: 'put',
      data: new_rules,
      headers: {
        'Authorization': `Bearer ${do_token}`,
        'Content-Type' : 'text/plain'
      }
    })
    .then( res =>{
      return res.data;
    })
    .catch(err=>{
      console.log(err);
      return [];
    });

    return { "message": true, "new_rules": new_rules }
  }

  return app();
}

I get this error

statusMessage: ‘Unprocessable Entity’

the credentials provided were correct as I can retrieve firewall list with it and If I use the data from retrieved firewall list, it worked. Any help?

using

{ rules: [
        {
          title: "ip_addr",
          value: "20.200.245.247"
        }
      ]
    }

not working and will return 422.