In react-select-search While typing the name,results is getting populated

Question

As I am a newbie, I was trying search filter in react.js. Using react-search-filter I have tried react-select-search and while searching the options are populating

after I type the name options get populates

I was expecting the only result I had typed to search on clicking the enter button. Please help Thank u

Code App.js

import React from 'react';
import {friends} from './data.js';
import SelectSearch from 'react-select-search';

class App extends React.Component {
  constructor(props) {
    super(props);


  }

  render() {

    function renderFriend(option) {
      const imgStyle = {
          borderRadius: '50%',
          verticalAlign: 'middle',
          marginRight: 10,
      };

      return (<span><img alt="" style={imgStyle} width="40" height="40" src={option.photo} /><span>{option.name}</span></span>);
  }


    return (
      <div className="App">
     <div className="container">
    <div className="row">
    <SelectSearch

    autofocus={true} 
    isSearchable={true}

                        value='one'
                        options={friends}
                        renderOption={renderFriend}
                    />

    </div>
  </div>
      </div>
    );
  }
}

export default App;

data.js

export const friends = [

    {name: 'Pencil', value: 'Apsara', company: "Apsara",photo: './img/pencil_2.jpg'},
    {name: 'book', value: 'Navneet', company: "navneet",photo: './img/pen_1.png'},
    {name: 'pen', value: 'Parker', company: "parker",photo: './img/pen_1.png'},
    {name: 'Pencil', value: 'Apsara', company: "Apsara",photo: './img/pencil_2.jpg'},


];