Adding Validation and Function to Input using React and MUI

Question

I am creating a cat APP, that pulls a request from thecatapi, I want my submit button to load my ImageGrid.jsx when they input the correct link for example:

in the dialog box you put: https://api.thecatapi.com/v1/images/search

then it must have a submit loading function and take you to the images of the cats:

what i have is this:

import React, { useState } from 'react';

import PropTypes from 'prop-types'

import  getCat  from './ImageGrid'

// Material UI 
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';





const DialogBox = ({ ariaLabel }) => {
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  // const handleGrid = () => {
  //   React.useState(true)
  // }
  
  return (
    <div className='modal'> 
      <Grid container justifyContent='center'>
        {/* Button To Open Dialog Box */}
        <Button 
        style={{border: '1px solid #ebc340', color: '#ebc340'}}
        variant="outlined" 
        color="secondary" 
        onClick={handleClickOpen}>
          Welcome to my Case Study, Click to begin
        </Button>
      </Grid>
        {/* Dialog Box Content */}
        <Dialog
        className='dialog-btn'
        open={open} 
        onClose={handleClose}>
          <DialogTitle>
            To begin the application, please insert your URL below:
          </DialogTitle>
          <DialogContent>
          <Input 
          placeholder="Enter Your Link Here" 
          inputProps={ariaLabel} 
          fullWidth/>
          </DialogContent>

          {/* Dialog Box Actions */}
          <DialogActions>
            <Button 
            onClick={handleClose} 
            color="secondary">
              Cancel 
            </Button>
            <Button 
            onClick={ getCat } 
            color='primary' 
            autoFocus
            type='submit'>
            {/* onSubmit={handleGrid} */}
              Submit
            </Button>
          </DialogActions>
        </Dialog>
    </div>
  );
}

Input.inputProps = {
  ariaLabel: 'Please insert your URL below',
  tertiaryColor: 'tertiary'
}

Input.inputTypes = {
  ariaLabel: PropTypes.string.isRequired,
  tertiaryColor: PropTypes.string.isRequired,
};
export default DialogBox

and then it needs to load this:

/

/ Fetch data from
import React, { useCallback, useEffect, useState } from "react";

const url = "https://api.thecatapi.com/v1/images/search?limit=9";

function ImageGrid() {
  const [catUrls, setCatUrls] = useState();

  const getCat = useCallback(() => {
    console.log("Hello World");

    let catImageUrlList = [];
    // fetch http request
    fetch(url)
      .then((res) => res.json()) //gives data in json
      .then((cats) => {
        console.log("Cats: ", cats);

        for (let i = 0; i < cats.length; i++) {
          catImageUrlList.push(cats[i].url);
        }

        setCatUrls(catImageUrlList);
      })
      .catch((error) => {
        console.log("Error: ", error);
      });
  }, [setCatUrls]);

  useEffect(() => {
    console.log("Loading your feline friends....");
    getCat();
  }, [getCat]);

  return (
    <>
      <h1>Look At These Beautiful Kitty's!</h1>
      {catUrls ? (
        catUrls.map((catUrl) => <img src={catUrl} alt={"kitty"} />)
      ) : (
        <p>Loading...</p>
      )}
      <button onClick={getCat}>Refresh</button>
    </>
  );
}

export default ImageGrid;