fetch GET request getting 400 (Bad Request)

Getting 'GET 400 bad request' error when passing a query string to the URL in fetch()

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-45be2-default-rtdb.firebaseio.com/ingredients.json/' + query)
  .then(response => response.json())
  .then(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;

This is the error message: Search.js:15 GET https://react-hooks-update-45be2-default-rtdb.firebaseio.com/ingredients.json/?orderBy=%22title%22&equalTo=%22Apple%22 400 (Bad Request)