React Component List fails to properly update the default value of Input components when Filtered

I am currently designing an application that contains a list of values in a list, called modifiers, to be edited by the user to then store for later use in calculations. To make it easier to find a specific modifier, I added a search function to the list in order to pull up the similar modifiers together to the user. However, once the user puts in a value into the filtered list and then unfilters the list, the component incorrectly assigns the values to the wrong modifiers. To be more specific, the ant design <List> component when filtered fails to put the proper defaultValue for each associated input. Namely, when I input a value into the first item in the filtered list and then unfilter it, the List incorrectly places that value within the first element on the unfiltered list, rather than the modifier it was supposed to be associated with. It should be putting the proper value with the associated element by assigning the value that its grouped with in the context I have stored, but it obviously fails to do so.

Here is the Ant Design List Component I am talking about, I have removed some callbacks that aren't necessary to understand the problem. The renderitem prop takes the dataSource prop as an input and maps all of the values into it to be inputs for the <List.Item> components.

EDIT: I failed to mention the hook in the first line, that is utilized by the search function in order to filter the words looked through to update the list accordingly. I also removed some unnecessary inline css and components since they are not relevant to the problem to improve readability. I have also decided to give a more concrete example of my issue:

This is an image of the initial values set by the user.

This is an image immediately after searching the exact name of the modifier and the list gets filtered. Clearly, the value from the first item of the unfiltered list is being put into the input of the first item of the filtered list, which is the main problem. Now when the search is undone, everything does get properly set, so I am unsure how to fix this.

I have some ideas as to why this is occurring. I know that the input components are not being re-rendered, and rather their ids are just being swapped out when the search occurs. So if there are any ways to either forcefully re-render the input components in addition to the list sections, please tell me!

const Modifiers = () => {
    const [searchFilter, setSearchFilter] = useState(military); //Only for words in search bar, "military" will be replaced with entire data set later
    const context = useContext(Context)

    const search = value => {
        if(value != ""){
            setSearchFilter(searchFilter.filter(mod => mod.name.toLowerCase().indexOf(value.toLowerCase()) != -1))
        }
        else {
            setSearchFilter(military)
        }
    }

    const updateContext = (e, name) => {
        let id = name.toLowerCase().replace(/ /gi, "_");

        if(context.modifiers[id] != undefined){
            context.modifiers[id] = parseFloat(e.target.value)
        }      
    }

    return (
        <Layout>
            <SiteHeader/>
            <Content style={{ padding: '1% 3%', backgroundColor: "white"}}>
                <Typography>
                    <Title level={2} style={{textAlign: "center"}}>
                        Modifier List
                    </Title>
                </Typography>

                <List dataSource={searchFilter} header={<div style={{display: "flex"}}> <Title level={3} style={{paddingLeft: "24px"}}>Modifiers</Title> <Button shape="circle" size="large" icon={<InfoCircleOutlined/>}/> <Search allowClear placeholder="Input Modifier Name" enterButton size="large" onSearch={search}
                    renderItem={mod => (
                        <List.Item extra={parseTags(mod)}>
                            <List.Item.Meta description={mod.desc} avatar={<Avatar src={mod.image}/>} title={<div style={{display: "flex"}}><Title level={5}>{mod.name}: </Title> <Input defaultValue={context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] != undefined ? context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] : ""} id={mod.name} onChange={(e) => updateContext(e, mod.name)}/></div>}/>
                        </List.Item>
                    )}
                />
            </Content>
            

        </Layout>
    );
}
export default Modifiers;

Here is the Context Class, the modifiers field is what is the issue currently. It only has 2 currently, but the problem persists when more are added, and these 2 modifiers are the first in the unfiltered list as well.

export class Provider extends React.Component {
    state = {
        name: "None Selected",
        tag: String,
        flag: "images/flags/ULM",
        modifiers: {
            army_tradition: 0,
            army_tradition_decay: 0,
        }
    }

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

Here is what one element in the military array looks like for reference as well. The regex inside the <List.Item> component is merely converting the name field of the object into one that matches whats stored within the context.modifiers field.

export const military = [
    {
        name: "Army Tradition",
        desc: "Adds to the rate of army tradition gained each year.",
        function: "ADDITIVE",
        type: "WHOLE NUMBER",
        category: "MILITARY",
        image: "/images/icons/landLeaderFire.png",
    },
...

Thanks for any help you can give.