Firebaseのエラー

現在FirebaseのでタータベースからデータをもらってAPIを叩いているのですが、このようなエラーが起こってしまいました。

{
  "error" : "Index not defined, add \".indexOn\": \"title\", for path \"/ingredients\", to the rules"
}

indexOnを試しにルールに追加してみたのですが、解決することができませんでした。

ご教授いただけると幸いです。

Search.js

import React,{useState,useEffect} from 'react';
import Card from '../UI/Card';
import './Search.css';

const Search = React.memo(props => {
  const {onLoadIngredients} = props
  const [enteredFilter,setEnteredFilter] = useState('');
 
  useEffect(() => {
    
      const query =
      enteredFilter.length === 0
        ? ''
        : `?orderBy="title"&equalTo="${enteredFilter}"`;
    fetch(`https://react-hooks-update-676a6.firebaseio.com/ingredients.json${query}`,
    )
      .then(response => {
        console.log(response);
         response.json()
        })
      .then(responseData => {
        console.log(responseData)
        const loadedIngredients = [];
        for (const key in responseData) {
          loadedIngredients.push({
            id: key,
            title: responseData[key].title,
            amount: responseData[key].amount
          });
        }
        onLoadIngredients(loadedIngredients);
      });
  }, [enteredFilter, onLoadIngredients]);

   
  return (
    <section className="search">
      <Card>
        <div className="search-input">
          <label>Filter by Title</label>
          <input
            type="text"
            value={enteredFilter}
            onChange={event => setEnteredFilter(event.target.value)}
          />
        </div>
      </Card>
    </section>
  );
});

export default Search;

Ingredients.js

import React,{useState,useEffect,useCallback} from 'react';
import IngredientList from './IngredientList'
import IngredientForm from './IngredientForm';
import Search from './Search';

function Ingredients() {

  const [useringredients,setUserIngredients] = useState([]);
    useEffect(() =>{
      fetch('https://react-hooks-update-676a6.firebaseio.com/ingredients.json').then(
        responese=>responese.json()
        ).then(responeseData=>{
          const loadedIngredients = [];
          for(const key in responeseData){
            loadedIngredients.push({
              id:key,
              title:responeseData[key].title,
              amount:responeseData[key].amount
            })
          }
          setUserIngredients(loadedIngredients);
        })
},[]);

useEffect(() =>{
  console.log('RENDRING INGREDIENTS',useringredients)
},[useringredients])

const filteredIngredientsHandler = useCallback(filteredIngredients => {
  setUserIngredients(filteredIngredients);
}, []);

const addIngredientHandler = ingredient => {
  fetch('https://react-hooks-update-676a6.firebaseio.com/ingredients.json', {
    method: 'POST',
    body: JSON.stringify(ingredient),
    headers: { 'Content-Type': 'application/json' }
  })
    .then(response => {
      return response.json();
    })
    .then(responseData => {
      setUserIngredients(prevIngredients => [
        ...prevIngredients,
        { id: responseData.name, ...ingredient }
      ]);
    });
};

const removeIngredientHandler = ingredientId => {
  setUserIngredients(prevIngredients =>
    prevIngredients.filter(ingredient => ingredient.id !== ingredientId)
  );
};


  return (
    <div className="App">
      <IngredientForm  onAddIngredient={addIngredientHandler}/>

      <section>
        <Search onLoadIngredients={filteredIngredientsHandler}/>
       　<IngredientList ingredients={useringredients}  onRemoveItem={removeIngredientHandler}/>
      </section>
    </div>
  );
}

export default Ingredients;

こちらコードです。
現在Udemyを元に学習しているので、中々質問がしづらくなってしまいました。
よろしくお願いします。