Change state and update it in the database

I'm working on a web app to track fruits vendor stock using React.js, MongoDB, Node.js, and Express. I called my database endpoints to render the data in the table. Now I try to increment and decrement the stock amount using a button, but when I try to set the new state, it doesn't work. I try to change the state by clicking, then update the new state in the database. Any advice?

• FruitTable component:

  import Reac, { Component } from 'react'; import * as ReactBootstrap from 'react-bootstrap'; import axios from 'axios'; import Button from 'react-bootstrap/Button';

  class FruitTable extends Component {

  constructor(props) {
    super(props)
  
    this.state = {
      fruits: []
    }
    this.handleClick = this.handleClick.bind(this)
  }
  
  
  componentDidMount() {
    axios.get('http://localhost:5000/fruits/')
    .then(res => {
      this.setState({
        fruits: res.data
      });
     })
    .catch((error) => {
      console.log(error)
    })
  
  
  
  }
  
  handleClick =  () => {
    const fruits = [...this.state.fruits]
    this.setState({fruits: this.state.fruits[1] +1})
  
    }
  
  
  render() {
  
    return(
      <div>
       <h1>Fruit Vendor Stock</h1>
      <ReactBootstrap.Table striped bordered hover size="sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Stock</th>
        <th>Price</th>
        <th>Add/Reomve</th>
      </tr>
    </thead>
    <tbody> 
      {
        this.state.fruits.map((fruit, index) => (
          <tr>
          <th scope="row">{index + 1}</th>
          <td>{fruit.name}</td>
          <td>{fruit.stock}</td>
          <td>{fruit.price}</td>
          <td>
            <div className="mb2">
            <Button className="btn btn-primary btn-sm"
              onClick={this.handleClick}
            >Add</Button>{' '}
            <Button className="btn btn-danger btn-sm"
  
            >Remove</Button> 
            </div>
          </td>
          </tr>
          ))
      }
    </tbody>
     </ReactBootstrap.Table>
    </div>
    )
  };
  

  }

  export default FruitTable;

• FruitsData.model

  const mongoose = require('mongoose');

  const Schema = mongoose.Schema;

  const fruits = new Schema({ name: { type: String, required: true }, stock: { type: Number, required: true }, price: { type: Number, required: true }, }, {

  });

  const Fruits = mongoose.model('Fruits', fruits);

  module.exports = Fruits;

-Routes:

const router = require('express').Router();
let Fruit = require('../models/fruit_data');

router.route('/').get((req, res) => {
    Fruit.find()
    .then(fruits => res.json(fruits))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/add').post((req, res) => {
    const name = req.body.name;
    const stock = Number(req.body.stock);
    const price = Number(req.body.price);

    const newFruit = new Fruit({
        name,
        stock,
        price,
    });

    newFruit.save()
    .then(() => res.json('Fruit has been added!'))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').get((req, res) => {
    Fruit.findById(req.params.id)
    .then(Fruit => res.json(Fruit))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').delete((req, res) => {
    Fruit.findByIdAndDelete(req.params.id)
    .then(() => res.json('Fruit has deleted.'))
    .catch(err => res.status(400).json("Error: " + err));
});

router.route('/update/:id').put((req, res, next) => {
    Fruit.findByIdAndUpdate(req.params.id, {
        $set: req.body
    }, (error, data) => {
        if(error) {
            return next(error);
            console.log(error)
        } else {
            res.json(data)
            console.log('Stock has been updated')
        }
    })   
    })

module.exports = router;

-Server.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());


const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true });
const connection = mongoose.connection;
connection.once('open', () => {
console.log("MongoDb database connection established successfully!!")

})

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const fruitsRouter = require('./routes/fruit');

app.use('/fruits', fruitsRouter);




app.listen(port, () => {
console.log(`Server is running on port: ${port}`);

})

-App.js:

import "./App.css";
import React, { Component, useState, useEffect } from "react";
import FruitTable from "./Components/fruitTable";
import "bootstrap/dist/css/bootstrap.min.css";
import { sendEmail } from "./service/emailService";
import axios from 'axios';

function App() {


  return (
    <div className="App">
     <FruitTable  />
    </div>
   );
  }

export default App;