Is there a way to call an image uploaded from a FileInput in another component?

Question

I'm using Grommet, and I created two FileInputs, and from the images they get a new image is generated. My question is: Is there a way to call the image I got from the FileInput in my Button? If yes, how? Thanks for any answer.

Code (Took out some unrelated junk):

function App() {
  function merge(pfpImage, overlayImage) {
    const pfpDimensions = sizeOf(pfpImage);
    const overlayDimensions = sizeOf(overlayImage);

    if (pfpDimensions == overlayDimensions) {
      return mergeImages([pfpImage, overlayImage]);
    } else {
      window.alert("Make sure the images have the same dimensions.");
    }
  }

  var mergedImage;

  return (
    <Grommet theme={theme}>
      <Header background="neutral-3" pad="medium" height="xsmall">
        <Anchor label="Social Ribbon" icon={<Image className="logoImage" a11yTitle="Social Ribbon Logo" src={logo} />} />
      </Header>
      <Main direction="column" pad="medium" gap="medium">
        <Box direction="row" gap="large">
          <Box direction="column" gap="medium">
            <Box direction="row" gap="small">
              <Text>Profile Picture: </Text>
              <FileInput
                name="pfp"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const pfpFile = fileList[i];
                  }
                }}
              />
            </Box>
            <Box direction="row" gap="small">
              <Text>Overlay: </Text>
              <FileInput
                name="overlay"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const overlayFile = fileList[i];
                  }
                }}
              />
            </Box>
          </Box>
          <Box>
            <Image src={mergedImage} />
          </Box>
        </Box>
        <Button primary size="small" label="Put overlay" onClick={mergedImage = merge(pfpFile, overlayFile)} />
      </Main>
    </Grommet>
  )
}