연락처 검색 버튼이 작동하지 않아요

import React, { useState } from 'react';
import {Form, Row, Col, Button} from 'react-bootstrap' 
import { useDispatch, useSelector } from 'react-redux';  

const SearchBox = () => { 
   let [keyword, setKeyword] = useState('');
   let dispatch = useDispatch()
   const { contact } = useSelector((state) => state);          
   const searchByName = (event) => {
     event.preventDefault();         
      dispatch({ type: "SEARCH_BY_USERNAME", payload: { keyword } });      
     };   
    return (
     <Form onSubmit={searchByName} className='search-box'>        
        <Row>
             <Col lg={8}>
                 <Form.Control
                     type="text" 
                     placeholder="이름을 입력해주세요" 
                     onChange={(event) => setKeyword(event.target.value)} 
    \ />                             </Col>             <Col lg={4}>                 <Button variant="dark">찾기</Button>             </Col>         </Row>     </Form>   ) }  export default SearchBox 

위의 코드는 search-box 코드이고

const initialState = {
    contact: [],
    keyword: "",
}
const reducer = (state = initialState, action) => {
    let { type, payload } = action;
    switch (type) {
      case "ADD_CONTACT":
        state.contact.push({
          name: payload.name,
          phoneNumber: payload.phoneNumber,
        });
        break;
      case "SEARCH_BY_USERNAME":
        state.keyword = payload.keyword;
        break;
    }
  
    return { ...state };
  };
  
  export default reducer;

위의 코드는 reducer.js 코드

import React, { useEffect, useState } from "react";
import SearchBox from "./SearchBox";
import ContactItem from "./ContactItem";
import { useSelector } from "react-redux";

const ContactList = () => {
   
const { contact, keyword } = useSelector((state) => state);

 let [filteredList, setFilteredList] = useState([]);

  useEffect(() => {
    if (keyword !== "") {
      let list = contact.filter((item) => item.name.includes(keyword));
      setFilteredList(list);
    } else {
      setFilteredList(contact);
    }
  }, [keyword]);

  return (
    <div>
      <SearchBox />
      <div className="contact-list">
        num:{filteredList.length}
        {filteredList.map((item, idx) => (
          <ContactItem item={item} key={idx} />
        ))
        }
      </div>
    </div>
  );
};

export default ContactList

위코드는 contactList 코드입니다.

너무 안되서 선생님 코드를 그대로 복붙하고 아무리 찾아봐도 다른 부분이 없는데 검색 버튼을 눌러도 작동하지 않습니다. 왜 안되는걸까요? 선생님? 이걸로 밤새고 있습니다.