here is my code****************************************************** App comp

function App() {
  const [shipNumber, setShipNumber] = useState('');  // every time return to the initial value here 

Routing is here ==>

       <BrowserRouter>
                <div className="content">
                    <Routes>

                        <Route exact path="/" element={ <Tracking shipNumber={shipNumber} setShipNumber = {setShipNumber} isChanged={isChanged} trackShipment={trackShipment}/>} />
                        <Route path="/status/:trackingnumber" element={<Status  shipNumber={shipNumber} />} />
                    </Routes>
                </div>
            </BrowserRouter>
    </div>
  );
}

**************************************************************Tracking comp

const Tracking = ( props) => {
  let navigate = useNavigate();
  const handleChange=(e)=>{
    e.preventDefault();
    const trackingNo = e.target.value;
    props.setShipNumber(trackingNo);
  };
  const handleClick =(e)=>{
    e.preventDefault();

here is trying to navigate

    navigate(`/status/${props.setIsChanged && props.shipNumber}`);
  };

  <form type="submit" onSubmit={props.trackShipment}>
    <input onChange={handleChange} value={props.shipNumber} placeholder='Tracking No.' required></input>
  

Status Comp

const Status = (props) => {
  const [shipment,setShipment]= useState(null);

===>

  const url = `https://tracking.bosta.co/shipments/track/${props.shipNumber}`;
  useEffect(()=>{
    axios.get(url).then(response=>{
      setShipment(response.data)
  
    })

  },[url]);