I am making a tour website using React as practice where a couple of locations with their images, descriptions as well as prices are presented and a button is added on each location where it removes a location from the site.

The function passed to the button is 'handleRemoval' whose code is as follows:

import { useState } from 'react';
import './App.css';
import Tours from'./tours.js'
import datas from './toursData.js'

function App() {

  const [locations, setLocations] = useState([datas])

  const handleRemoval = (id) =>{
  const newLocations = locations.filter(location => location.id !== id);
  console.log(newLocations); //checking whether locations is filtered
  setLocations(newLocations);
}
return (
    <Tours tours={datas} handleRemoval={handleRemoval}/>
);
}

When I click the button and check the console I find that locations is not filtered and I don't understand why pls help :(

Github also happens to be showing errors so if you need the full code I'll just send it to you