I am a beginner and I am learning React JS. I am doing a basic project in React. I have a search box. When I search for something my page will show search related content.

Here I used includes() to make my search workable. But it is not working.

I have indicated the line of setting a new array of dogs at line 40. Pleae have a look to my code.

Here is my codes:

Home.jsx

import React, { useState, useEffect } from 'react';
import Dogs from './components/Dogs/Dogs';
import Search from './components/search/Search';

const Home = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [value, setValue] = useState('');
  const [search, setSearch] = useState('');
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    fetch('https://api.thedogapi.com/v1/breeds', {
      headers: {
        Authorization: '4139956d-7014-4fa8-b295-8e361418c807',
      },
    })
      .then(response => response.json())
      .then(
        data => {
          setIsLoaded(true);
          setDogs(data);
        },
        error => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  const handleChange = event => {
    setValue(event.target.value);
  };

  const handleSearch = () => {
    setSearch(value);
    setValue('');
  };

  // This is the function to making a new array of dogs of searched name
  useEffect(() => {
    const newDogList = dogs.filter(dog => {
      if (dog.name.includes(search)) dog
    });
    setDogs(newDogList);
  }, [search]);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div className="container">
        <Search
          value={value}
          handleChange={handleChange}
          handleSearch={handleSearch}
        />
        <Dogs dogs={dogs} />
      </div>
    );
  }
};

export default Home;

How can I make it workable?