React js & material UI

**Parent component**
import { Link } from 'react-router-dom'

<Link
                              to={{
                                pathname: "/dashboard/selectmapsubjctefaculaty",
                                state: { row }
                              }}
                            >
                              <Button
                                size='small'
                                className='mr-1 fullWidth'
                                color="secondary"
                                variant='contained'
                                sx={{ width: "100%", p: "0.1em", borderRadius: "2px" }}
                              >Assign Faculty</Button></Link>

**Child component**

import { useLocation } from 'react-router-dom/cjs/react-router-dom.min'

 const location = useLocation()

  let subject = location.state.row

import { Autocomplete, Box, TextField } from '@mui/material'
import React, { Fragment, useState } from 'react'
import styled from '@emotion/styled';

 const _handleInputChange = (e, data) => {
    if (e.target.value.length > 3) {
      GET_SEARCH_STUDENT(e.target.value)
    }
  }
  const _handleChnage = async (e, value) => {
    let res = await GET_STUDENT_DETAILS(value?.id)
    setStudentDetails(res)
  }
  const _handleAddFee = () => {
    setAddFeeType(!AddFeeType)
  }

  <Autocomplete
        sx={{ boxShadow: 4 }}
        id="auto-com"
        options={searchStudent}
        renderInput={params => (
          <StyledInputBase {...params} label="Search student" />
        )}
        getOptionLabel={option => `${option?.firstname} ${option?.lastname} ${option?.phone}`}
        style={{ boxShadow: 3 }}
        onChange={(e, newvalue) => {
          _handleChnage(e, newvalue)
        }}
        onInputChange={handleInputChange}
      />