Filter Search in React JS

Im having trouble filtering data based on my input search... my goal is to search for 'M' and to see a list of all payload data containing 'M' and as I get closer to the exact string 'Matt' only show the payload data for 'Matt' and bacisally be able to search by first_name, last_name or number. Thank you in advance, ANY feedback is appreciated! Ive been stuck on this >_<

Im using a Custom component library and trying to do a basic search & filter, the issue is not with the custom library but with the filter function. It doesnt seem to retrieve the v.first_name value. Im also open to any other sorts of filter libraries / approaches.

I typed in the letter 'M' into the searchbox UI component and got the following outputs for each console log statement

import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS } from '../../actions/keys';
import { users } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';

import {
    LumosTheme,
    Grid, Form, Icon, Container, Loader
} from '@CustomLibrary/core';

class SearchBar extends Component {

    state = {
        responseData: " ",
        handle: true,
        query: "",
        filterValues: []
    };

    searchString = this.state.query;
    responseData = this.props.Users.data;

    componentDidMount() {
        this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users).then(() => {
            return this.setState({
                handle: false
            })
        })
    }
    handleInputChange = (value) => {
        console.log("In HandleInputFunction, Value= ", value) // Output of value is 'M'
        this.setState({query:value}, () => {
            console.log("In HandleInputFunction, query= ", this.state.query) // Output of query is 'M'
            this.filterArray();
        }
        )
    }
    filterArray = () => {
        console.log('In Filter fxn')
        let searchString = this.state.query;
        let responseData = this.props.Users.data;
        console.log('This is the responseData in Filter: ', responseData); // output of responseData is '(6)[{...},{...},{...},{...},{...},{...}]'  
        console.log('This is my filterValues in Filter: ', this.state.filterValues); //output of filterValues is '[]'
        console.log('This is my searchString in Filter: ', searchString) //output of searchString is 'M'



            if(searchString.length > 0){
                const filterData  =  _.filter(this.state.responseData, (v) =>  v.first_name  === searchString);
                console.log('This is my filterData in loop: ',filterData) //output of filterData is '[]'

                this.setState({
                      filterValues : filterData
                })
                console.log('This is my filterValues in loop: ', this.state.filterValues) //output of filterValues is '[]'
            }

    }
    // for now this drop down 'searchByOptions' is hard coded and just here for UI visual purposes, what I want to do later is depending on the option the user choses I pass the correct payload. 
    searchByOptions = [
        { label: 'Name or number', value: 'NAME/number' },
        { label: 'Distribution List', value: 'DL' },
        { label: 'Database Schema or Table', value: 'DB' },
        { label: 'Role', value: 'Role' }
    ];
    render() {

        if (this.state.handle) {
            return <Loader />
        }
        else {
            return (
                <LumosTheme>
                    <Container width='1379px'>
                        &nbsp;&nbsp;
                    </Container>
                    <Container width='1379px'>
                        <Grid paddingTop='10px'>
                            <Form.Item width='380px'>
                                <Form.Dropdown
                                    options={this.searchByOptions}
                                    defaultOption={this.searchByOptions[0]}

                                />
                            </Form.Item>
                        </Grid>
                        <Grid flexWrap="wrap" width='1000px'>
                            &nbsp;
                            < Form.SearchBox placeholder='Search' icon={<Icon.SearchRounded />}
                                userSelectOnClick
                                openOnClick
                                onSearch={this.handleInputChange}
                                value={this.state.query}
                            >
                                <Form.SearchList >
                                {this.state.responseData ?
                                    this.state.filterValues.map(item => (
                                        <Form.SearchOption
                                            value={item.first_name}
                                        />
                                        )):'null'}
                                </Form.SearchList>
                            </ Form.SearchBox>
                        </Grid>
                    </Container>
                </LumosTheme>
            )
        }
    }
}
const mapStateToProps = state => {

    return {
        Users: state.users
    }
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar);

my payload is being fetched correctly and looks like so

0: {id:1, first_name: "Matt", last_name: "Jones", number:"123",}
1: {id:2, first_name: "Alex", last_name: "Lee",   number:"675",}
2: {id:3, first_name: "Adam", last_name: "Khan",  number:"733",}
3: {id:4, first_name: "Sue", last_name:  "Kid",   number:"248",}
4: {id:5, first_name: "Jade", last_name: "Smith", number:"907",}
5: {id:6, first_name: "Luca", last_name: "James", number:"125",}

It looks like you are doing an exact match with that filter condition.

You can use _.filter(this.state.responseData, (v) => v.first_name.includes(searchString));.

Pro tip: once you go lodash, you never go back... That didn't rhyme, but you get the point.