Data filter with map, shows for 1/2 second then goes blank

Question

On my test branch I can get this to work just fine, but when I try to add it to my partners work, it will map just fine but when I add the .filter with the following line .includes(query.toLowerCase()) like below, The page will load for 1/2 a second and then instantly go blank. I get an error in the console saying:

"Uncaught TypeError: query.toLowerCase is not a function"

< BasicModal />
            <input
          autoFocus={true}
          onChange={event => setQuery(event.target.value)} placeholder="Search..."> 
          </input>
          </div>
          <br />
          <hr />
          <div>
            {
            wikiData.filter(data =>{
              if(query === ''){
                return data;
              } else if (data.title.toLowerCase().includes(query.toLowerCase())) {
                return data;
              } else if (data.body.toLowerCase().includes(query.toLowerCase())) {
                return data;
              }

            }).map((data, index) => (
              <div key={data.id}
                ref={refs[data.id]}
                style={{ height: 'flex', paddingLeft: '5%', paddingRight: '5%' }}>
                <h1 style={{ fontSize: 24, fontWeight: "bold", textAlign: "center" }}>{data.title}</h1>

                <div style={{ textAlign: "center", paddingBottom: "10px", Top: "-5px!important" }}>
                  <Tooltip title="Edit Content">
                    <EditIcon data-id={data.id} fontSize='large' color='action' style={{ paddingRight: "10px", cursor: "pointer" }} onClick={() => handleEdit(data, index)} />
                  </Tooltip>
                  <Tooltip title="Save Edit">
                    <Check data-id={data.id} fontSize='large' color='success' style={{ paddingRight: "10px", cursor: "pointer" }} onClick={() => saveEdit(data, index)} />
                  </Tooltip>
                  <Tooltip title="Delete Post">
                    <CloseIcon fontSize='large' color='error' style={{ cursor: "pointer" }} />
                  </Tooltip>
                </div>
                <div id={data.id} className="wiki-unedited" onChange={handleChange} value={data.body} >{data.body}</div>
                <hr style={{ paddingLeft: "10%", paddingRight: "10%", width: "80%" }} />

              </div>
            ))}
          </div>


        </Grid>
      </Grid>
    </div>

Answer 1

I figured it out... I didnt post it all to make it solvable either.. I had the state variable set to an array instead of a string...