I am trying to apply a change to only one item in an array depending on a prop. I have this list:

interface FieldProps {
  fileLimitWarning?: // I STILL NEED TO FIGURE THIS OUT
}

const DataField = (props: FieldProps) => {
 const { fileLimitWarning, handleFileSelection } = props;

 return (
   <>
     {fileLimitWarning && <p>This file exceeds the max size of 250mb</p>}
     <input onChange={e => handleFileSelection(e.target.files)} />
   </>
}

const ContainerOfDataField = () => {
 const [fileLimitWarning, setFileLimitWarning] = useState(false);

 const handleFileSelection = (files) => {
    setFileLimitWarning(false);
    const [currentFile] = files;

    if(currentFile?.size <= 250000000) {
      setFileLimitWarning(true);
    }
 }

 return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            return (
              <DataField
                key={index}
                fileLimitWarning={fileLimitWarning}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
 )  
}

In this case what I want is to only return null in the DataField component when it corresponds. Right now whenever that fileLimitWarning === true on the ContainerOfDataField component, it hides/removes/deletes all of the Typography nodes from the DataField component. So what I need is to hide only the index that matches where the problem is coming from.

Is it clear?