Best practice on how to redirect after form validation while passing api result

I have setup a form with filters using ant design components.
Once the user click on the validation button, my script checks the inputs and then calls the API.

I was wondering about the best practice and the most efficient way to display the result of the api to the user ? should i redirect the user to a new page with the result or stay on the same page and display the result instead of the form ? How could I do that ? (any example or link to a repository would be highly appreciated)

Here is my code :

import React, {Component} from 'react';
import {Form, Select, Button } from 'antd';

import 'antd/dist/antd.css';
import './main_filter.css';

class MainFilter extends Component {
    formRef = React.createRef();
  
    handleFormSubmit = event => {
      event.preventDefault();
      const category = this.formRef.current.getFieldValue("category");
      const time_limit = this.formRef.current.getFieldValue("time-limit");
      
      // ...
      // how to show the result to the user after calling the api ?
    };
  
    render() {
      return (
  
      <Form ref={this.formRef}
            onSubmit={this.handleFormSubmit}
            initialValues={{"category": ['a', 'b', 'c'], "time-limit": 'm30' }}>
  
          <div className="row container-center mt-4 mb-4">
  
              <Form.Item name="category" className="m-0">
                  <Select name="category">
                      <Option value='a'>{'a'}</Option>
                      <Option value='b'>{'b'}</Option>
                      <Option value='c'>{'c'}</Option>
                  </Select>
              </Form.Item>
  
              <Form.Item name="time-limit" className="m-0">
                  <Select name="time-limit">
                      <Option value='m20'>{'20 minutes'}</Option>
                      <Option value='m30'>{'30 minutes'}</Option>
                      <Option value='m40'>{'40 minutes'}</Option>
                  </Select>
              </Form.Item>
          </div>
  
          <div className="row d-flex justify-content-center p-3">
              <Button type="primary" size="large" onClick={this.handleFormSubmit} >Search</Button>
          </div>
      </Form>
  
      );
    }
  }

  class MainPageContent extends Component {
    render() {
      return (
      <div className="content">
          <div className="row h-100 align-items-center mr-0 pb-5">
              <div className="fixed offset-2">
                  <div className="container-center pt-1 pr-5 pl-5 pb-5">
                      <h2> TITLE </h2>
                  </div>
                  <div className="container-filter pt-4 pl-4 pr-4 pb-1">
                      <MainFilter/>
                  </div>
              </div>
          </div>
      </div>
      );
    }
  }
  
  export default MainPageContent;

Thanks !

Source: React Router Questions